q2-tecton-elements 1.71.4 → 1.73.0

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js

@@ -1,4 +1,4 @@
-import { h, Fragment, } from "@stencil/core";
+import { h } from "@stencil/core";
 import { loc, waitForNextPaint } from "../../utils/index";
 import sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from "../../utils/sanitize-html-string";
 import mirrorEmit from "../../utils/mirror-emit";
@@ -9,9 +9,13 @@ import mirrorEmit from "../../utils/mirror-emit";
  */
 export class Q2ActionSheet {
     constructor() {
+        // #region Own Properties
+        this.bodyOverflow = '';
         this.initialSelectedOptions = [];
         this.maxHeight = 0.75;
         this.minHeight = 0.2;
+        this.rootOverflow = '';
+        this.selectedDate = {};
         this.selectedOptions = { values: [], value: '' };
         // #endregion
         // #region State Properties
@@ -168,6 +172,26 @@ export class Q2ActionSheet {
                 return;
             this.onCancel(event);
         };
+        this.onDatePickerCancel = (event) => {
+            event.stopPropagation();
+            this.onCancel(event);
+        };
+        this.onDatePickerChange = (event) => {
+            event.stopPropagation();
+            this.selectedDate = event.detail;
+        };
+        this.onDatePickerClose = (event) => {
+            event.stopPropagation();
+            const detail = event.detail || undefined;
+            if (detail === null || detail === void 0 ? void 0 : detail.error) {
+                this.hide({ error: detail.error, type: 'confirm' });
+                return;
+            }
+            const hasSelection = this.selectedDate.value !== undefined ||
+                this.selectedDate.rangeStart !== undefined ||
+                this.selectedDate.rangeEnd !== undefined;
+            this.hide({ ...this.selectedDate, type: hasSelection ? 'confirm' : 'cancel' });
+        };
         this.onListChange = (event) => {
             this.selectedOptions = event.detail;
         };
@@ -187,16 +211,47 @@ export class Q2ActionSheet {
                 this.onListDone();
             }
         };
+        this.onViewportResize = () => {
+            requestAnimationFrame(() => this.updateDialogMinMaxHeight());
+        };
         // #endregion
         // #region Render Methods
+        this.renderDatePicker = ({ data }) => {
+            const props = data.datePickerProps;
+            return (h("div", { class: "content date-picker-content", ref: el => (this.contentElement = el) }, h("q2-date-picker", { _actionSheet: true, open: true, calendarLabel: props.calendarLabel, closeDelay: props.closeDelay, cutoffTime: props.cutoffTime, daysOfWeekChecksum: props.daysOfWeekChecksum, disclaimer: props.disclaimer, endDate: props.endDate, displayFormat: props.displayFormat, invalidDates: props.invalidDates, locale: props.locale, mode: props.mode, rangeEnd: props.rangeEnd, rangeStart: props.rangeStart, startDate: props.startDate, validDates: props.validDates, value: props.value, onTctCancel: this.onDatePickerCancel, onTctChange: this.onDatePickerChange, onTctClose: this.onDatePickerClose })));
+        };
         this.renderList = ({ data }) => {
             var _a;
             const { listProps, slotsHtml = [] } = data;
-            return (h(Fragment, null, slotsHtml
-                .filter(entry => entry.slot === 'top')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, label: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.title) || this.title, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
-                .filter(entry => entry.slot === 'bottom')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) })))));
+            let scrollTopSlots = false;
+            const slots = slotsHtml.map(entry => {
+                var _a;
+                const html = sanitizeActionSheetSlotHtml(entry.html);
+                const container = document.createElement('div');
+                container.innerHTML = html;
+                const marked = ((_a = container.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-action-sheet-scroll')) === true;
+                if (entry.slot === 'top' && marked)
+                    scrollTopSlots = true;
+                return {
+                    ...entry,
+                    html,
+                    scrolls: entry.slot === 'top' ? scrollTopSlots : marked,
+                };
+            });
+            // Bottom content joins the scroll area from the options through the last marker.
+            let scrollBottomSlots = false;
+            for (let index = slots.length - 1; index >= 0; index--) {
+                const entry = slots[index];
+                if (entry.slot !== 'bottom')
+                    continue;
+                if (entry.scrolls)
+                    scrollBottomSlots = true;
+                entry.scrolls = scrollBottomSlots;
+            }
+            const renderSlots = (position, scrolls) => slots
+                .filter(entry => entry.slot === position && entry.scrolls === scrolls)
+                .map(entry => (h("div", { class: "list-slot", innerHTML: entry.html })));
+            return (h("div", { class: "list-body" }, renderSlots('top', false), h("div", { class: "content", ref: el => (this.contentElement = el) }, renderSlots('top', true), h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, label: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.title) || this.title, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null)), renderSlots('bottom', true)), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), renderSlots('bottom', false)));
         };
         this.renderMessage = ({ data }) => {
             return (h("q2-message", { type: data.type }, data.title && h("h2", null, data.title), data.description && h("p", null, data.description)));
@@ -210,6 +265,9 @@ export class Q2ActionSheet {
     disconnectedCallback() {
         this.dialogElement.removeEventListener('cancel', this.onCancel);
         this.dialogElement.removeEventListener('keydown', this.handleDialogKeydown, true);
+        window.removeEventListener('resize', this.onViewportResize);
+        if (this.dialogElement.open)
+            this.restorePageScroll();
     }
     componentDidLoad() {
         this.dialogElement.addEventListener('cancel', this.onCancel);
@@ -222,6 +280,8 @@ export class Q2ActionSheet {
     async hide(data = { value: '', values: [], type: 'confirm' }) {
         mirrorEmit(this, ['close', 'tctClose'], data);
         this.renderStatus = 'is-closing';
+        window.removeEventListener('resize', this.onViewportResize);
+        this.restorePageScroll();
         this.dialogElement.addEventListener('transitionend', () => {
             if (this.renderStatus !== 'is-closing')
                 return;
@@ -229,25 +289,38 @@ export class Q2ActionSheet {
             this.renderStatus = null;
             this.data = undefined;
             this.initialSelectedOptions = [];
+            this.selectedDate = {};
             this.selectedOptions = { values: [], value: '' };
             this.hidePostHook();
         }, { once: true });
     }
     async show() {
+        if (this.dialogElement.open)
+            return;
         this.showPreHook();
         await waitForNextPaint();
         this.updateDialogMinMaxHeight();
         this.storeInitialValues();
-        if (this.dialogElement.open)
-            return;
         this.dialogElement.showModal();
-        this.renderStatus = 'is-opening';
-        this.dialogElement.addEventListener('transitionend', () => {
-            if (this.renderStatus !== 'is-opening')
-                return;
-            this.renderStatus = 'is-open';
-            this.focusContent();
-        }, { once: true });
+        window.addEventListener('resize', this.onViewportResize);
+        this.bodyOverflow = document.body.style.overflow;
+        this.rootOverflow = document.documentElement.style.overflow;
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+        try {
+            this.renderStatus = 'is-opening';
+            this.dialogElement.addEventListener('transitionend', () => {
+                if (this.renderStatus !== 'is-opening')
+                    return;
+                this.renderStatus = 'is-open';
+                this.focusContent();
+            }, { once: true });
+        }
+        catch (error) {
+            window.removeEventListener('resize', this.onViewportResize);
+            this.restorePageScroll();
+            throw error;
+        }
     }
     // #endregion
     // #region Local Methods
@@ -273,6 +346,10 @@ export class Q2ActionSheet {
             this.hostElement.innerHTML = null;
         }
     }
+    restorePageScroll() {
+        document.body.style.overflow = this.bodyOverflow;
+        document.documentElement.style.overflow = this.rootOverflow;
+    }
     showPreHook() {
         const { data } = this;
         if (!data)
@@ -298,12 +375,15 @@ export class Q2ActionSheet {
         this.dialogElement.style.setProperty('--comp-action-sheet-computed-max-height', `${Math.floor(windowHeight * this.maxHeight)}px`);
     }
     render() {
-        var _a;
         const { data } = this;
         const showHeader = (data === null || data === void 0 ? void 0 : data.title) || this.title || !this.hideClose;
+        const headerTitle = (data === null || data === void 0 ? void 0 : data.title) || this.title;
         const renderStatus = this.renderStatus || '';
         let RenderContent = null;
         switch (data === null || data === void 0 ? void 0 : data.appearance) {
+            case 'date-picker':
+                RenderContent = this.renderDatePicker;
+                break;
             case 'message':
                 RenderContent = this.renderMessage;
                 break;
@@ -316,7 +396,7 @@ export class Q2ActionSheet {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '840635222baf3ed3f7193c550bb73675d0b466d4', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick, "aria-labelledby": showHeader ? 'title' : undefined }, h("div", { key: 'c09338fde8ba753281162bd75714e29e6a8cc936', class: interiorClasses }, showHeader && (h("header", { key: 'd3bb667204c262a28363b71ffe6fba8209454391' }, h("div", { key: '8981cf55df99b607a49660fd6ecfe8ef827c100e', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'b4d175a3e7d0382ae9e4630a4fe0f85403af5888', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '95624ea4bcb5a9897a2b09326de718205a32e346', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '4f599b2645c604bde96747af50f8d7344db60e11' }, data.description), RenderContent && h(RenderContent, { key: '0878d252923c4c3a8b82cc89f8a88fc3bace794d', data: this.data }))));
+        return (h("dialog", { key: 'a2594cad0378cf9bf045ed3ec1022afc58e34dbb', ref: el => (this.dialogElement = el), class: renderStatus, "aria-label": showHeader ? undefined : headerTitle, "aria-labelledby": showHeader ? 'title' : undefined, onClick: this.onClick }, h("div", { key: 'de6361cfa49ec69666b8b2c193dcc9cfc5ac4b0f', class: interiorClasses }, showHeader && (h("header", { key: 'c5a1ddd1f414027e3f75d2a7048c1ccd349cba78' }, h("div", { key: '3d4e7472f5c55ed96eec5ad8909d6ada7a5aa5b2', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'c5e4c952b308e2571a6e90017e4f8010b4a580fe', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '10383e6b8d6ab899648208bbada3c18f47fb5bd3', type: "close" }))))), data && 'description' in data && data.description && h("p", { key: 'a1de7256a6f497270866f076d7697226a8bea946' }, data.description), RenderContent && h(RenderContent, { key: '3f5a57d706b4066c036bb4710a612bd34268b78e', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -337,7 +417,7 @@ export class Q2ActionSheet {
                 "mutable": true,
                 "complexType": {
                     "original": "ActionSheetData",
-                    "resolved": "{ appearance: \"list\"; title?: string; description?: string; event?: MouseEvent | KeyboardEvent; listProps: { multiple: boolean; selectedOptions: ActionSheetSelectedOption[]; noSelect: boolean; }; options: ActionSheetListDataOptions; slotsHtml?: ActionSheetStaticHtmlData[]; } | { appearance: \"message\"; type: \"info\" | \"success\" | \"warning\" | \"error\"; title?: string; description?: string; slotsHtml?: ActionSheetStaticHtmlData[]; }",
+                    "resolved": "{ appearance: \"date-picker\"; title?: string; datePickerProps: ActionSheetDatePickerProps; } | { appearance: \"list\"; title?: string; description?: string; event?: MouseEvent | KeyboardEvent; listProps: { multiple: boolean; selectedOptions: ActionSheetSelectedOption[]; noSelect: boolean; }; options: ActionSheetListDataOptions; slotsHtml?: ActionSheetStaticHtmlData[]; } | { appearance: \"message\"; type: \"info\" | \"success\" | \"warning\" | \"error\"; title?: string; description?: string; slotsHtml?: ActionSheetStaticHtmlData[]; }",
                     "references": {
                         "ActionSheetData": {
                             "location": "import",

package/dist/collection/components/q2-action-sheet/test/q2-action-sheet-test.vr.js

@@ -0,0 +1,124 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+// q2-action-sheet hosts stay hidden until show() runs, which makes setupPage's
+// `[stencil-hydrated]:visible` wait time out. Prepending any visible hydrated Stencil
+// element lets that wait resolve so we can call show(). Matches q2-modal's VR setup.
+const VISIBLE_HYDRATION_ANCHOR = `<q2-icon type="info"></q2-icon>`;
+for (const multiple of [false, true]) {
+    for (const landscape of [false, true]) {
+        const name = `mixed-slots-${multiple ? 'multi' : 'single'}-${landscape ? 'landscape' : 'portrait'}`;
+        test(name, async ({ page }) => {
+            await page.setViewportSize(landscape ? { width: 667, height: 375 } : { width: 375, height: 667 });
+            await setupPage(page, `${VISIBLE_HYDRATION_ANCHOR}<q2-action-sheet></q2-action-sheet>`, {
+                setupLoc: true,
+                fontSizePx: 24,
+            });
+            await page.locator('q2-action-sheet').evaluate(async (element, multiple) => {
+                await element.componentOnReady();
+                element.data = {
+                    appearance: 'list',
+                    title: 'Profile',
+                    listProps: { multiple, selectedOptions: [], noSelect: false },
+                    options: Array.from({ length: 30 }, (_, index) => ({
+                        value: `profile-${index}`,
+                        display: `Profile ${index + 1}`,
+                        innerHTML: `Profile ${index + 1}`,
+                        disabled: false,
+                        hidden: false,
+                        multiline: false,
+                        separator: false,
+                    })),
+                    slotsHtml: [
+                        { slot: 'top', html: '<div>Fixed top</div>' },
+                        { slot: 'top', html: '<div data-action-sheet-scroll>Alex Example</div>' },
+                        { slot: 'top', html: '<div>alex@example.com</div>' },
+                        { slot: 'bottom', html: '<div>Profile help</div>' },
+                        { slot: 'bottom', html: '<div data-action-sheet-scroll>Manage profiles</div>' },
+                        { slot: 'bottom', html: '<div>Fixed bottom</div>' },
+                    ],
+                };
+                await element.show();
+            }, multiple);
+            await expect(page.locator('q2-action-sheet dialog')).toHaveClass('is-open');
+            const content = page.locator('q2-action-sheet .list-body > .content');
+            await expect(content).toHaveCount(1);
+            // Opening moves focus from the dialog's close button to its options.
+            // Capture a defined focus and scroll state rather than either opening state.
+            const firstOption = page.locator('q2-action-sheet q2-option').first();
+            await expect(firstOption).toHaveAttribute('stencil-hydrated', '');
+            await firstOption.evaluate(element => element.focus({ preventScroll: true }));
+            await expect(firstOption).toBeFocused();
+            await content.evaluate(element => {
+                element.scrollTop = 0;
+            });
+            await expect(content).toHaveJSProperty('scrollTop', 0);
+            const movingSlots = content.locator('.list-slot');
+            const fixedSlots = page.locator('q2-action-sheet .list-body > .list-slot');
+            await expect(movingSlots).toHaveText([
+                'Alex Example',
+                'alex@example.com',
+                'Profile help',
+                'Manage profiles',
+            ]);
+            await expect(fixedSlots).toHaveText(['Fixed top', 'Fixed bottom']);
+            const fixedElements = page.locator('q2-action-sheet header, q2-action-sheet .list-body > .list-slot, q2-action-sheet footer');
+            const initialBounds = await Promise.all((await fixedElements.all()).map(element => element.boundingBox()));
+            const dimensions = await content.evaluate(element => ({
+                clientHeight: element.clientHeight,
+                scrollHeight: element.scrollHeight,
+            }));
+            expect(dimensions.clientHeight).toBeGreaterThan(0);
+            expect(dimensions.scrollHeight).toBeGreaterThan(dimensions.clientHeight);
+            const dialogBounds = await page.locator('q2-action-sheet dialog').boundingBox();
+            const contentBounds = await content.boundingBox();
+            expect(contentBounds.y).toBeGreaterThanOrEqual(dialogBounds.y);
+            expect(contentBounds.y + contentBounds.height).toBeLessThanOrEqual(dialogBounds.y + dialogBounds.height + 1);
+            await expect(firstOption).toBeFocused();
+            await expect(page).toHaveScreenshot(`q2-action-sheet--${name}.png`);
+            const lastOption = page.locator('q2-action-sheet q2-option').last();
+            await lastOption.scrollIntoViewIfNeeded();
+            await expect(lastOption).toBeInViewport({ ratio: 1 });
+            const optionBounds = await lastOption.boundingBox();
+            expect(optionBounds.y).toBeGreaterThanOrEqual(contentBounds.y - 1);
+            expect(optionBounds.y + optionBounds.height).toBeLessThanOrEqual(contentBounds.y + contentBounds.height + 1);
+            expect(await content.evaluate(element => element.scrollTop)).toBeGreaterThan(0);
+            await content.evaluate(element => {
+                element.scrollTop = element.scrollHeight;
+            });
+            await expect(movingSlots.last()).toBeInViewport({ ratio: 1 });
+            await expect(movingSlots.first()).not.toBeInViewport();
+            expect(await Promise.all((await fixedElements.all()).map(element => element.boundingBox()))).toEqual(initialBounds);
+            for (const element of await fixedSlots.all()) {
+                await expect(element).toBeInViewport({ ratio: 1 });
+            }
+            if (multiple) {
+                await expect(page.locator('q2-action-sheet [test-id="btnDone"]')).toBeInViewport({ ratio: 1 });
+            }
+            await expect(page.locator('q2-action-sheet [test-id="btnClose"]')).toBeInViewport({ ratio: 1 });
+            await expect(page).toHaveScreenshot(`q2-action-sheet--${name}--scrolled.png`);
+        });
+    }
+}
+for (const theme of THEMES) {
+    test(`q2-action-sheet--calendar-navigation-focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, '<q2-btn>Choose a date</q2-btn><q2-action-sheet></q2-action-sheet>', {
+            theme,
+            setupLoc: true,
+        });
+        await page.locator('q2-action-sheet').evaluate((element) => {
+            element.data = {
+                appearance: 'date-picker',
+                title: 'Choose a date',
+                datePickerProps: { mode: 'single', value: '2026-06-15' },
+            };
+        });
+        await page.locator('q2-action-sheet').evaluate((element) => element.show());
+        const navigation = page.locator('q2-date-picker .previousYear button');
+        await navigation.waitFor({ state: 'visible' });
+        await page.keyboard.press('Tab');
+        await navigation.focus();
+        await expect(navigation).toBeFocused();
+        await expect(page).toHaveScreenshot(`q2-action-sheet--calendar-navigation-focus--${theme}.png`);
+    });
+}

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

@@ -90,7 +90,7 @@ export class Q2Avatar {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (h("div", { key: 'bdce1116b87a48c861e7ba66e0dccd13829d3819', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: '461db5f2062faa3c4d7f43105c84c51aabc179d8', class: "decorator" }, h("slot", { key: '673a93a53a752514bce15687f5791682fdf3b0b7', name: "decorator" }))), showImg && (h("img", { key: 'fa881cb161c7f2bf64dabc1cf888d465e4698cb9', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: '6d8707c833fed056813f81b9014e82584444fa54', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'ae99c0b68abaa70e9517dee3dfe6dfdccdad13d6', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: 'df92213216e69c7d933fdfcd4ba1664cee793e14', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '373a344abc59c1e8ea07472d932d5417265582d3', type: this.icon })))));
+        return (h("div", { key: '2a10f13b2ca606dab3563d026910d909e37ddcb0', class: `avatar-wrapper size-${this.size}` }, this.hasDecorator && (h("div", { key: 'e5deb3da74508a5731238724895ca9f1ab8b7a50', class: "decorator" }, h("slot", { key: '3cc01e88891a09f7917416a0acd0940e79decf26', name: "decorator" }))), showImg && (h("img", { key: 'cbed4e936072bca7bd23bd18b8679d0539c3fbd2', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { key: 'f1876a7748d3806e21e48f3de7b70c6faea499ca', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { key: 'a120d991968334f383efcb9d5ef920c7ee542880', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { key: '598457dc937327172221fab317246d1085a57b02', "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { key: '578836c985252ea19c06d5499e6ad8f9c311e09f', type: this.icon })))));
     }
     static get is() { return "q2-avatar"; }
     static get encapsulation() { return "shadow"; }