q2-tecton-elements 1.71.2 → 1.72.0

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

@@ -21,11 +21,19 @@ export class Q2Modal {
         // #endregion
         // #region Public Property API
         /**
-         * Controls visibility of the close button in the top right corner.
+         * Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key.
          */
         this.closable = true;
+        /**
+         * Whether the action buttons should take up the full width of the modal footer.
+         */
+        this.fullWidthButton = true;
         // #endregion
         // #region Local Methods
+        this.hasDialogTransition = () => {
+            const transitionDurations = (getComputedStyle(this.dialogElement).transitionDuration || '0s').split(',');
+            return transitionDurations.some(duration => parseFloat(duration) > 0);
+        };
         this.initializeModal = () => {
             // limits 4 buttons in action slot
             this.hostElement.querySelectorAll('[slot="action"]').forEach((el, i) => {
@@ -39,6 +47,8 @@ export class Q2Modal {
         };
         this.onCancel = (event) => {
             event.preventDefault();
+            if (!this.closable)
+                return;
             this.closeModal();
         };
         this.onClick = (event) => {
@@ -49,12 +59,16 @@ export class Q2Modal {
             const slot = eventTarget.getAttribute('slot');
             if (slot === 'action') {
                 this.tctClick.emit({ value: eventTarget.dataset.value });
-                this.onCancel(event);
+                event.preventDefault();
+                this.closeModal();
             }
             else {
                 const isInContent = !!eventTarget.closest('.interior , q2-modal');
                 if (isInContent)
                     return;
+                this.tctBackdropClick.emit();
+                if (!this.closable)
+                    return;
                 this.onCancel(event);
             }
         };
@@ -78,33 +92,50 @@ export class Q2Modal {
     // #region Component Lifecycle Events
     disconnectedCallback() {
         var _a;
-        this.dialogElement.removeEventListener('cancel', this.onCancel);
         (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.debouncedScroll);
     }
     componentDidLoad() {
-        this.dialogElement.addEventListener('cancel', this.onCancel);
         this.tctReady.emit();
         this.bodyOverflow = document.body.style.overflow;
         this.debouncedScroll = debounce(this.onContentScroll, 100);
         this.contentElement.addEventListener('scroll', this.debouncedScroll);
     }
     componentDidRender() {
-        var _a;
-        (_a = this.scheduledAfterRender) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn());
+        var _a, _b;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.setAttribute('closedby', this.closable ? 'closerequest' : 'none');
+        (_b = this.scheduledAfterRender) === null || _b === void 0 ? void 0 : _b.forEach(fn => fn());
         this.scheduledAfterRender = [];
     }
     // #endregion
     // #region Public Methods API
     async closeModal(data) {
-        this.tctClose.emit(data);
-        this.renderStatus = 'is-closing';
+        var _a;
+        if (!((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.open))
+            return;
+        const shouldWaitForTransition = this.renderStatus === 'is-open' && this.hasDialogTransition();
         document.body.style.overflow = this.bodyOverflow;
-        this.dialogElement.addEventListener('transitionend', () => {
+        const completeClose = () => {
             if (this.renderStatus !== 'is-closing')
                 return;
+            this.dialogElement.removeEventListener('transitionend', onTransitionComplete);
+            this.dialogElement.removeEventListener('transitioncancel', onTransitionComplete);
             this.dialogElement.close();
             this.renderStatus = null;
-        }, { once: true });
+            this.tctClose.emit(data);
+        };
+        const onTransitionComplete = (event) => {
+            if (event.target !== this.dialogElement || event.propertyName !== 'transform')
+                return;
+            completeClose();
+        };
+        if (shouldWaitForTransition) {
+            this.dialogElement.addEventListener('transitionend', onTransitionComplete);
+            this.dialogElement.addEventListener('transitioncancel', onTransitionComplete);
+        }
+        this.renderStatus = 'is-closing';
+        if (!shouldWaitForTransition) {
+            completeClose();
+        }
     }
     async openModal(option) {
         var _a;
@@ -125,18 +156,28 @@ export class Q2Modal {
         document.body.style.overflow = 'hidden';
         this.initializeModal();
         this.renderStatus = 'is-opening';
-        this.dialogElement.addEventListener('transitionend', () => {
-            if (this.renderStatus !== 'is-opening')
-                return;
+        if (!this.hasDialogTransition()) {
             this.renderStatus = 'is-open';
-        }, { once: true });
+            return;
+        }
+        const completeOpen = (event) => {
+            if (event.target !== this.dialogElement || event.propertyName !== 'transform')
+                return;
+            this.dialogElement.removeEventListener('transitionend', completeOpen);
+            this.dialogElement.removeEventListener('transitioncancel', completeOpen);
+            if (this.renderStatus === 'is-opening') {
+                this.renderStatus = 'is-open';
+            }
+        };
+        this.dialogElement.addEventListener('transitionend', completeOpen);
+        this.dialogElement.addEventListener('transitioncancel', completeOpen);
     }
     // #endregion
     // #region Render Methods
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '92dc143e4337dbe56582ec8ef8f0568dd71e3e55', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '8528e0443f56c88b0e3454cc5b33e5307c93b4b3', class: interiorClasses }, this.title && (h("header", { key: '58082ec96ee55a2054ced1d14c71ca048a9af336' }, this.title && h("h2", { key: '8ac56ee9d3eb84056faaa748a9a2d69ef946eeeb', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '664890ce00ec76f4f4339f1b32579cfe95f8ad40', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '3c9349bf6456c8684ac87d3c6918820081e2657b', type: "close" }))))), h("div", { key: '76fa2465d4d60db5e0843274348b85eaf1a49ed6', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'd9d7ae8b43dae09abbaf3fcfec61fdf66ab0f619', class: "icon" }, h("q2-icon", { key: '3db0ae939a529933b79018a23b88a7d429658a9a', type: this.icon }))), this.imageSrc && (h("div", { key: 'bf295b4c233610b87b6f75557f4c4d439d757c96', class: "image" }, h("img", { key: 'ffcd4e115096ed4e48349ba28b00a261bdd78f7b', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '09342f081d5307fe109e247a6c2de7bca0fd6b0f', name: "content" }), this.description && h("p", { key: '892e4550e230f47e26e757b6f483c2bee0f424ce', class: "description" }, this.description), this.customMarkup && (h("p", { key: '625a6ee4350fe16c3589ebed630f86be8a420609', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '7663cc739e8fe908b9a916e1ddbc0a0364c8023f' }, h("q2-action-group", { key: 'a426f7228f0f4a7ae991fc65d221795279ec2530', "full-width": true }, h("slot", { key: 'f6862c2074f18f31a9775f2de07aaa3e8904ac76', name: "action" }))))));
+        return (h("dialog", { key: 'efa04c4cab9624ecc331124fbc54bba9b0b67f23', ref: el => (this.dialogElement = el), class: renderStatus, onCancel: this.onCancel, onClick: this.onClick }, h("div", { key: '81e9fa70f3c4a687fc543250d5d7c8c351968aba', class: interiorClasses }, this.title && (h("header", { key: '30eb57f4344a623ecbfa36a05f19cdbf2012cf55' }, this.title && h("h2", { key: 'a3d880ddf32ef43e2587c47152a28b0a861a60e4', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '90ae641a244ca09a2de917331d5669ceddef24e9', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '530d9b90eb044e7eb0b52cb877ee018e859014ec', type: "close" }))))), h("div", { key: 'a643bd41ea14bb6238bebaff18d608bb1116c4d5', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'e5d99acc00768c6f235a7108903d9992725c08f2', class: "icon" }, h("q2-icon", { key: '97ffba3484e2bf0901a1520a7a8e8099cc03c3ba', type: this.icon }))), this.imageSrc && (h("div", { key: '5426e6276902a70be2b6cf64849580587dfa6368', class: "image" }, h("img", { key: '00bb517674151bce32307c0cae70e1cae45da7a2', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '1ca0b130e835e24b3891d7ca2870105b538ba14d', name: "content" }), this.description && h("p", { key: '86d27f942231bff0754befb1abc2b1108f16f1ad', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'f25747c08a3c49fe8388f1528b70490e92ee01fb', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'd823aa857d2f003ac671d6cf93b1a0b63dabdaff' }, h("q2-action-group", { key: '31c7fa360c61861b26b26e38ffe241760f3c5cb9', "full-width": this.fullWidthButton }, h("slot", { key: '9988c2db9d3635d05c66c2b5e3ed6745a9bfaa1c', name: "action" }))))));
     }
     static get is() { return "q2-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -164,7 +205,7 @@ export class Q2Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls visibility of the close button in the top right corner."
+                    "text": "Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key."
                 },
                 "getter": false,
                 "setter": false,
@@ -210,6 +251,26 @@ export class Q2Modal {
                 "reflect": false,
                 "attribute": "description"
             },
+            "fullWidthButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the action buttons should take up the full width of the modal footer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width-button",
+                "defaultValue": "true"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -277,6 +338,21 @@ export class Q2Modal {
     }
     static get events() {
         return [{
+                "method": "tctBackdropClick",
+                "name": "tctBackdropClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal backdrop is clicked."
+                },
+                "complexType": {
+                    "original": "undefined",
+                    "resolved": "undefined",
+                    "references": {}
+                }
+            }, {
                 "method": "tctClick",
                 "name": "tctClick",
                 "bubbles": true,
@@ -361,6 +437,10 @@ export class Q2Modal {
                             "path": "q2-tecton-common/lib/types/modal",
                             "id": "../q2-tecton-common/lib/types/modal.d.ts::ModalResponse",
                             "referenceLocation": "ModalResponse"
+                        },
+                        "TransitionEvent": {
+                            "location": "global",
+                            "id": "global::TransitionEvent"
                         }
                     },
                     "return": "Promise<void>"
@@ -388,6 +468,10 @@ export class Q2Modal {
                             "path": "q2-tecton-common/lib/types/modal",
                             "id": "../q2-tecton-common/lib/types/modal.d.ts::ModalOption",
                             "referenceLocation": "ModalOption"
+                        },
+                        "TransitionEvent": {
+                            "location": "global",
+                            "id": "global::TransitionEvent"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -92,6 +92,7 @@ const focusCase = (variant, theme) => {
     });
 };
 const BASIC_VARIANT = VARIANTS.find(v => v.name === 'basic');
+const LONG_DESCRIPTION_VARIANT = VARIANTS.find(v => v.name === 'long-description');
 test.describe('q2-modal — variants × themes', () => {
     for (const variant of VARIANTS) {
         for (const theme of THEMES) {
@@ -104,6 +105,11 @@ test.describe('q2-modal — variants × themes', () => {
         }
     }
 });
+test('q2-modal--full-width-button-false--open — standard', async ({ page }) => {
+    await setupPage(page, `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title="Confirm action" description="Are you sure you want to continue with this action?" full-width-button="false">${ACTIONS}</q2-modal>`, { theme: 'standard', setupLoc: true });
+    await openModal(page);
+    await expect(page).toHaveScreenshot('q2-modal--full-width-button-false--open--standard.png');
+});
 test.describe(`q2-modal — scaled font size × themes`, () => {
     if (BASIC_VARIANT) {
         for (const theme of THEMES) {
@@ -115,3 +121,22 @@ test.describe(`q2-modal — scaled font size × themes`, () => {
         }
     }
 });
+test.describe('q2-modal — 400% zoom equivalent × themes', () => {
+    if (LONG_DESCRIPTION_VARIANT) {
+        for (const theme of THEMES) {
+            test(`q2-modal--long-description--400-percent-zoom — ${theme}`, async ({ page }) => {
+                await page.setViewportSize({ width: 320, height: 256 });
+                await setupPage(page, LONG_DESCRIPTION_VARIANT.html, { theme, setupLoc: true });
+                await openModal(page);
+                await page.locator('q2-modal').evaluate((el) => {
+                    var _a;
+                    const interior = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.interior');
+                    if (!interior)
+                        throw new Error('q2-modal interior not found in shadow DOM');
+                    interior.scrollTop = interior.scrollHeight;
+                });
+                await expect(page).toHaveScreenshot(`q2-modal--long-description--400-percent-zoom--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-pill/q2-pill.css

@@ -349,8 +349,8 @@ q2-popover,
 q2-icon {
   --tct-icon-stroke-primary: var(--tct-pill-icon-stroke, currentcolor);
   --tct-icon-stroke-width: var(--tct-pill-icon-stroke-width, inherit);
-  width: var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));
-  height: var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));
+  width: var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));
+  height: var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));
   transition-property: transform;
   transition: var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)));
 }

package/dist/collection/components/q2-popover/q2-popover.css

@@ -199,8 +199,9 @@ button {
 }
 :popover-open.up,
 .show.up {
-  top: unset;
-  bottom: var(--comp-pop-bottom);
+  top: var(--comp-pop-top);
+  bottom: unset;
+  translate: 0 calc(-100% - var(--app-scale-2x, 10px));
 }
 :popover-open.down.left:not(.mobile),
 .show.down.left:not(.mobile) {

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

@@ -117,10 +117,10 @@ export class Q2Popover {
             const isScrollableIframe = isModule && isInScrollableContainer(this.hostElement);
             if (currentDirection === 'up') {
                 if (isModule && !isScrollableIframe) {
-                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                    containerElement.style.setProperty('--comp-pop-top', `${controlTop}px`);
                 }
                 else {
-                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - scrollY}px`);
+                    containerElement.style.setProperty('--comp-pop-top', `${controlTop + scrollY}px`);
                 }
             }
             if (currentDirection === 'down') {
@@ -287,7 +287,7 @@ export class Q2Popover {
         this.containerElement.style.removeProperty('--comp-pop-position');
     }
     async determinePopDirection() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const { containerElement, controlElement, providedDirection, displayBuffer } = this;
         if (containerElement)
             containerElement.style.maxHeight = null;
@@ -320,9 +320,10 @@ export class Q2Popover {
                 : viewableSpaceBelow - displayBuffer;
         }
         else {
-            windowHeight = window.innerHeight;
-            maxSpaceAbove = controlTop - displayBuffer;
-            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;
+            const { height = window.innerHeight, offsetTop = 0 } = (_d = window.visualViewport) !== null && _d !== void 0 ? _d : {};
+            windowHeight = height;
+            maxSpaceAbove = controlTop - offsetTop - displayBuffer;
+            maxSpaceBelow = offsetTop + windowHeight - controlBottom - displayBuffer;
         }
         const directionWithMostSpace = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';
         // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
@@ -392,7 +393,7 @@ export class Q2Popover {
             containerClasses.push('animating-open');
         if (this.animationState === 'closing')
             containerClasses.push('animating-close');
-        return (h("div", { key: '4fe0c06793144eb83fe53cfc568af81226f78345', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: 'ed5d7c9f5efba8b129d580e68ab6692849332cf4', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '4c5d5b9682014b2e94b153ca33a3e0c4dd58d6bb' }))));
+        return (h("div", { key: '680ad8a90ef98d3a8c2c1f5ba2284d7cdfc3d2a6', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: 'dfe4d6f72df0dfa029d9296e27ceb60a75131d83', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '22144006d226160fe790d156255d54e24bcad8ce' }))));
     }
     static get is() { return "q2-popover"; }
     static get encapsulation() { return "shadow"; }