q2-tecton-elements 1.54.4 → 1.55.0

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

@@ -0,0 +1,223 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+@keyframes showBackdrop {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes hideBackdrop {
+  to {
+    opacity: 0;
+  }
+}
+dialog {
+  --comp-border-radius-default: var(--app-scale-3x, 15px);
+  --comp-border-radius: var(--tct-modal-border-radius, var(--comp-border-radius-default));
+  --comp-desktop-border-radius: var(--tct-modal-border-radius, var(--app-scale-3x, 15px));
+  --comp-close-button-size: var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));
+  --comp-header-height: var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));
+  --comp-dialog-background: var(--tct-modal-background, var(--t-base, #ffffff));
+  --comp-dialog-color: var(--tct-modal-color, var(--t-text, #4d4d4d));
+  --comp-dialog-padding: var(--tct-modal-padding, var(--app-scale-3x, 15px));
+  --comp-content-gradient-height: var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));
+  --comp-dialog-gap: var(--tct-modal-gap, var(--app-scale-2x, 10px));
+  --comp-dialog-max-width: var(--tct-modal-max-width, 600px);
+  --comp-dialog-max-height: var(--tct-modal-max-height, 100vh);
+  --comp-dialog-min-height: var(--tct-modal-min-height, 40vh);
+  --comp-dialog-box-shadow: var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
+  position: fixed;
+  top: 100%;
+  bottom: unset;
+  color: var(--comp-dialog-color);
+  background: var(--comp-dialog-background);
+  transition: transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));
+  width: 100%;
+  max-width: var(--comp-dialog-max-width);
+  border: 0;
+  border-radius: var(--comp-border-radius);
+  box-shadow: var(--comp-dialog-box-shadow);
+  padding: 0;
+  height: auto;
+  overflow: hidden;
+}
+dialog::backdrop {
+  opacity: 0;
+  background: var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)));
+}
+dialog[open] {
+  border-radius: var(--comp-desktop-border-radius);
+  top: 0px;
+  bottom: 0px;
+  height: fit-content;
+  transform: translateY(10%);
+  opacity: 1;
+}
+dialog[open].is-opening, dialog[open].is-open {
+  opacity: 1;
+  transform: translateY(0);
+}
+dialog[open].is-opening::backdrop, dialog[open].is-open::backdrop {
+  opacity: 1;
+  animation: showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));
+}
+dialog[open].is-closing {
+  transform: translateY(10%);
+}
+dialog[open].is-closing::backdrop {
+  animation: hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));
+}
+
+.content {
+  overflow-y: auto;
+  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
+  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));
+  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));
+  scrollbar-width: thin;
+  scrollbar-color: var(--comp-scrollbar-color) transparent;
+}
+.content::-webkit-scrollbar {
+  width: var(--comp-scrollbar-size);
+  height: var(--comp-scrollbar-size);
+  margin: 5px;
+}
+.content::-webkit-scrollbar-thumb {
+  background: var(--comp-scrollbar-color);
+  border-radius: var(--comp-scrollbar-border-radius);
+}
+.content::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: var(--comp-scrollbar-border-radius);
+}
+.content .icon {
+  height: var(--tct-modal-icon-size, var(--app-scale-9x, 45px));
+  margin: var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));
+  display: flex;
+  justify-content: center;
+}
+.content .icon q2-icon {
+  width: var(--tct-modal-icon-size, var(--app-scale-9x, 45px));
+}
+.content .image {
+  display: flex;
+  justify-content: center;
+}
+.content .image img {
+  width: 100%;
+  border-radius: var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px));
+}
+.content .message {
+  font-size: 1rem;
+}
+.content.more-gradient {
+  -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);
+  mask-image: linear-gradient(to bottom, red 85%, transparent 100%);
+}
+
+.interior {
+  display: grid;
+  min-height: var(--comp-dialog-min-height);
+  grid-template-rows: auto 1fr auto;
+  gap: var(--comp-dialog-gap);
+  max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));
+  padding: var(--comp-dialog-padding);
+}
+.interior.is-list header,
+.interior.is-list footer {
+  position: relative;
+}
+.interior.is-list header:before,
+.interior.is-list footer:before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  height: var(--comp-content-gradient-height);
+  width: 100%;
+  z-index: 1;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+}
+header .title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  text-align: left;
+  font-weight: var(--tct-modal-title-font-weight, 400);
+  margin: 0;
+  padding-top: 0.5rem;
+}
+header .btn-close {
+  grid-area: close;
+  width: var(--comp-close-button-size);
+  height: var(--comp-close-button-size);
+}

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

@@ -0,0 +1,470 @@
+import { h } from "@stencil/core";
+import { debounce, hasSlotContent, waitForNextPaint } from "../../utils/index";
+import sanitizeHTMLString from "../../utils/sanitize-html-string";
+export class Q2Modal {
+    constructor() {
+        // #region Own Properties
+        // to prevent background scroll when modal scrolls
+        this.bodyOverflow = '';
+        this.scheduledAfterRender = [];
+        // #endregion
+        // #region Local Methods
+        // to be removed
+        this.iconStyle = () => {
+            const styleObject = {};
+            if (this.iconStrokePrimary)
+                styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;
+            if (this.iconStrokeSecondary)
+                styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;
+            if (this.iconFillColor)
+                styleObject['--tct-icon-fill'] = this.iconFillColor;
+            if (this.iconStrokeWidth)
+                styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;
+            return styleObject;
+        };
+        this.initializeModal = () => {
+            // limits 4 buttons in action slot
+            this.hostElement.querySelectorAll('[slot="action"]').forEach((el, i) => {
+                if (i >= this.maxActionButtons) {
+                    console.warn(`q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`);
+                    el.hidden = true;
+                }
+            });
+            this.contentElement.scrollTo({ top: 0 });
+            this.debouncedScroll();
+        };
+        this.onCancel = (event) => {
+            event.preventDefault();
+            this.closeModal();
+        };
+        this.onClick = (event) => {
+            event.stopPropagation();
+            const eventTarget = event.target;
+            if (!(eventTarget instanceof HTMLElement))
+                return;
+            const slot = eventTarget.getAttribute('slot');
+            if (slot === 'action') {
+                this.tctClick.emit({ value: eventTarget.dataset.value });
+                this.onCancel(event);
+            }
+            else {
+                const isInContent = !!eventTarget.closest('.interior , q2-modal');
+                if (isInContent)
+                    return;
+                this.onCancel(event);
+            }
+        };
+        this.onContentScroll = () => {
+            var _a;
+            const scrollHeight = this.contentElement.scrollHeight;
+            const scrollTop = Math.ceil(this.contentElement.scrollTop);
+            const contentHeight = Math.ceil(((_a = this.contentElement.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height) || 0);
+            // to show bottom gradient when more contents available
+            if (scrollHeight > contentHeight) {
+                scrollHeight <= contentHeight + scrollTop
+                    ? this.contentElement.classList.remove('more-gradient')
+                    : this.contentElement.classList.add('more-gradient');
+            }
+            else {
+                this.contentElement.classList.remove('more-gradient');
+            }
+        };
+        this.maxActionButtons = 4;
+        this.renderStatus = 'is-closing';
+        this.closable = true;
+        this.customMarkup = undefined;
+        this.description = undefined;
+        this.icon = undefined;
+        this.iconFillColor = undefined;
+        this.iconStrokePrimary = undefined;
+        this.iconStrokeSecondary = undefined;
+        this.iconStrokeWidth = undefined;
+        this.imageSrc = undefined;
+        this.title = undefined;
+    }
+    // #endregion
+    // #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());
+        this.scheduledAfterRender = [];
+    }
+    // #endregion
+    // #region Public Methods API
+    async closeModal(data) {
+        this.tctClose.emit(data);
+        this.renderStatus = 'is-closing';
+        document.body.style.overflow = this.bodyOverflow;
+        this.dialogElement.addEventListener('transitionend', () => {
+            if (this.renderStatus !== 'is-closing')
+                return;
+            this.dialogElement.close();
+            this.renderStatus = null;
+        }, { once: true });
+    }
+    async openModal(option) {
+        var _a;
+        if ((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.open)
+            return;
+        this.tctOpen.emit(option);
+        await waitForNextPaint();
+        // overwrite the properties if option provided
+        if (option) {
+            this.title = (option === null || option === void 0 ? void 0 : option.title) || this.title;
+            this.description = (option === null || option === void 0 ? void 0 : option.description) || this.description;
+            this.imageSrc = (option === null || option === void 0 ? void 0 : option.imageSrc) || this.imageSrc;
+            this.icon = (option === null || option === void 0 ? void 0 : option.icon) || this.icon;
+            this.iconStrokePrimary = (option === null || option === void 0 ? void 0 : option.iconStrokePrimary) || this.iconStrokePrimary;
+            this.iconStrokeSecondary = (option === null || option === void 0 ? void 0 : option.imageSrc) || this.imageSrc;
+            this.iconFillColor = (option === null || option === void 0 ? void 0 : option.iconFillColor) || this.iconFillColor;
+            this.iconStrokeWidth = (option === null || option === void 0 ? void 0 : option.iconStrokeWidth) || this.iconStrokeWidth;
+            this.description = (option === null || option === void 0 ? void 0 : option.description) || this.description;
+        }
+        this.dialogElement.showModal();
+        this.dialogElement.open = true;
+        document.body.style.overflow = 'hidden';
+        this.initializeModal();
+        this.renderStatus = 'is-opening';
+        this.dialogElement.addEventListener('transitionend', () => {
+            if (this.renderStatus !== 'is-opening')
+                return;
+            this.renderStatus = 'is-open';
+        }, { once: true });
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const interiorClasses = `interior`;
+        const renderStatus = `${this.renderStatus || ''}`;
+        return (h("dialog", { key: '73f146b4e163c9395837b932588870487645b6ce', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '4219e99c0186ffe1a7e0d3a9e81334adb02a4979', class: interiorClasses }, this.title && (h("header", { key: '77d134b2d00f7e4221b25917ab46714446c19b22' }, this.title && h("h2", { key: '0f43942c22bd5b9ca7784bcd4c637c6fc3fb1203', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '6dcf3f2a05cf76a78cf8e2fddd4566d88ddb7421', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '8cdf1b3e2b4990547381f04527e0ca3116802949', type: "close" }))))), h("div", { key: 'e1bcef9f5eca9e2f4504abbbd4d90ba690e4a6d2', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '0bd5d3ca0d3f13c3879b752202697841fffabf94', class: "icon" }, h("q2-icon", { key: 'f236ba5a6f0b14fa865ace8f69813634fa65494c', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '9c2978ebff4bdc67930fe2a5232b5fb92822e3c9', class: "image" }, h("img", { key: '6c5ac47ad9f780e6496b3c8464f003a7f76cbb58', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'cd4bb02b38c02115a5c8601cc0c4371cbe01611d', name: "content" }), this.description && h("p", { key: 'e94d10a5b24629b9a8c965b28a5b439a83e1324b', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'cfc781b852faeba9d089355a92809873f0efdda0', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '57c18d04f08e1e00bf3e869d84e8e2f9d8901ae5' }, h("q2-action-group", { key: '9f27a49f45568166416acf2a9df83d3d0da58cb2', "full-width": true }, h("slot", { key: '64a30e7f6ebaf5f5b99264235d5510835826f566', name: "action" }))))));
+    }
+    static get is() { return "q2-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility of close button on top right corner."
+                },
+                "attribute": "closable",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "customMarkup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows HTML markup as modal content, but it'll be sanitized as needed for security purpose."
+                },
+                "attribute": "custom-markup",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Plain text, description of the modal."
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon type, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon)."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconFillColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon)."
+                },
+                "attribute": "icon-fill-color",
+                "reflect": false
+            },
+            "iconStrokePrimary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon)."
+                },
+                "attribute": "icon-stroke-primary",
+                "reflect": false
+            },
+            "iconStrokeSecondary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon)."
+                },
+                "attribute": "icon-stroke-secondary",
+                "reflect": false
+            },
+            "iconStrokeWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon)."
+                },
+                "attribute": "icon-stroke-width",
+                "reflect": false
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL in modal content, it renders with 100% width."
+                },
+                "attribute": "image-src",
+                "reflect": true
+            },
+            "title": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Plain text, title of the modal on top area."
+                },
+                "attribute": "title",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "maxActionButtons": {},
+            "renderStatus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tctClick",
+                "name": "tctClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when one of action button is clicked."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "tctClose",
+                "name": "tctClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when modal is closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "tctOpen",
+                "name": "tctOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal is opened."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "tctReady",
+                "name": "tctReady",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the modal has finished rendering."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "closeModal": {
+                "complexType": {
+                    "signature": "(data?: ModalResponse) => Promise<void>",
+                    "parameters": [{
+                            "name": "data",
+                            "type": "{ appearance: \"message\"; type: \"info\" | \"success\" | \"warning\" | \"error\"; title?: string; description?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ModalResponse": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/utility/modal",
+                            "id": "../q2-tecton-common/lib/utility/modal.d.ts::ModalResponse"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "openModal": {
+                "complexType": {
+                    "signature": "(option?: ModalOption) => Promise<void>",
+                    "parameters": [{
+                            "name": "option",
+                            "type": "{ title?: string; description?: string; customMarkup?: string; imageSrc?: string; icon?: string; iconStrokePrimary?: string; iconStrokeSecondary?: string; iconFillColor?: string; iconStrokeWidth?: string; closeable?: boolean; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ModalOption": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/utility/modal",
+                            "id": "../q2-tecton-common/lib/utility/modal.d.ts::ModalOption"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=q2-modal.js.map