@zoho_apptics/apptics-js-sdk 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/cjs/feedback/template.d.ts

@@ -1,2 +1,2 @@
-export declare const feedbackUIHtml = "<div id=\"zasdkFeedbackconatiner\" class=\"zasdk-modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"zasdkFeedbackTitle\">\n                            <div class=\"zasdk-header\">\n                                <h2 id=\"zasdkFeedbackTitle\" class=\"zasdk-title\">Share feedback</h2>\n                                <span id=\"appticsfeedbackclose\" class=\"zasdk-close\" role=\"button\" tabindex=\"0\" aria-label=\"Close\"><svg viewBox=\"0 0 24 24\" style=\" width: 20px; \"><path d=\"M19.92,19.08c.23.23.23.61,0,.85-.12.12-.27.18-.42.18s-.31-.06-.42-.18l-7.08-7.08-7.08,7.08c-.12.12-.27.18-.42.18s-.31-.06-.42-.18c-.23-.23-.23-.61,0-.85l7.08-7.08-7.08-7.08c-.23-.23-.23-.61,0-.85s.61-.23.85,0l7.08,7.08,7.08-7.08c.23-.23.61-.23.85,0s.23.61,0,.85l-7.08,7.08,7.08,7.08Z\"/></svg></span>\n                            </div>\n                            <div class=\"zasdk-feedback-types\" data-type=\"\">\n                                <div class=\"zasdk-feedback-type zasdk-selected\" data-type=\"feedback\">\n                                    <div class=\"zasdk-iconcnt zasdkfeedback__icon-reqest\">\n                                        <i class=\"zasdkfeedback__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M6.69,9.25h10.81c.41,0,.75-.34.75-.75s-.34-.75-.75-.75H6.69c-.41,0-.75.34-.75.75s.34.75.75.75Z\"/><path d=\"M6.69,13.07h8.11c.41,0,.75-.34.75-.75s-.34-.75-.75-.75H6.69c-.41,0-.75.34-.75.75s.34.75.75.75Z\"/><path d=\"M20.72,5.17c0-.68-.55-1.23-1.23-1.23H4.48c-.68,0-1.23.55-1.23,1.23v11.84c0,.68.55,1.23,1.23,1.23h13.49l1.25,1.51c.17.2.41.31.67.31.1,0,.2-.02.3-.05.34-.13.57-.46.56-.83l-.03-14.01ZM19.22,17.39l-.17-.2c-.24-.29-.58-.45-.95-.45H4.75V5.44h14.47v11.95Z\"/></svg></i>\n                                    </div>\n                                    <div>Feedback</div>\n                                </div>\n                                <div class=\"zasdk-feedback-type\" data-type=\"bug\">\n                                    <div class=\"zasdk-iconcnt zasdkfeedback__icon-report\">\n                                        <i class=\"zasdkfeedback__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M15.6,6.58c-.13-.37-.3-.7-.5-.97l1.23-1.18c.24-.23.25-.61.02-.85-.23-.24-.61-.25-.85-.02l-1.26,1.21c-.66-.45-1.37-.62-1.79-.68-.25-.04-.51-.04-.76-.02-.83.08-1.45.35-1.93.7l-1.22-1.2c-.24-.23-.62-.23-.85,0-.23.24-.23.62,0,.85l1.21,1.19c-.24.34-.41.68-.51.96-2.02,1.37-3.27,3.82-3.27,6.44,0,4.18,3.08,7.58,6.87,7.58s6.87-3.4,6.87-7.58c0-2.62-1.25-5.06-3.26-6.44ZM11.82,5.27c.15-.02.31-.01.47.01.69.1,1.86.48,2.26,1.9-.17.17-.51.44-1.14.65-1.08.36-2.31.28-3.36-.23-.24-.11-.44-.23-.6-.36,0-.01,0-.03.01-.04.18-.65.73-1.77,2.36-1.93ZM12,19.4c-3.12,0-5.67-2.86-5.67-6.38,0-1.98.82-3.82,2.19-5.02.26.25.59.48,1.01.68.78.38,1.65.57,2.5.57.6,0,1.19-.09,1.76-.28.88-.29,1.39-.7,1.67-1,1.38,1.2,2.21,3.06,2.21,5.05,0,3.52-2.54,6.38-5.67,6.38ZM9.12,9.86c-.92,0-1.67.75-1.67,1.67s.75,1.67,1.67,1.67,1.67-.75,1.67-1.67-.75-1.67-1.67-1.67ZM9.12,11.99c-.26,0-.47-.21-.47-.47s.21-.47.47-.47.47.21.47.47-.21.47-.47.47ZM14.88,9.86c-.92,0-1.67.75-1.67,1.67s.75,1.67,1.67,1.67,1.67-.75,1.67-1.67-.75-1.67-1.67-1.67ZM14.88,11.99c-.26,0-.47-.21-.47-.47s.21-.47.47-.47.47.21.47.47-.21.47-.47.47ZM12,14.49c-.92,0-1.67.75-1.67,1.67s.75,1.67,1.67,1.67,1.67-.75,1.67-1.67-.75-1.67-1.67-1.67ZM12,16.62c-.26,0-.47-.21-.47-.47s.21-.47.47-.47.47.21.47.47-.21.47-.47.47Z\"/></svg></i>\n                                    </div>\n                                    <div>Bug</div>\n                                </div>\n                                <div class=\"zasdk-feedback-type\" data-type=\"help\">\n                                    <div class=\"zasdk-iconcnt zasdkfeedback__icon-help\">\n                                        <i class=\"zasdkfeedback__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12.45,16.47c-.33,0-.6-.27-.6-.6v-2.7c0-.43.25-.82.64-.99.95-.42,3.15-1.62,3.15-3.51,0-1.6-1.01-3.03-2.51-3.55-.95-.33-1.97-.28-2.87.16-.91.43-1.59,1.2-1.92,2.14-.11.31-.45.48-.77.37-.31-.11-.48-.45-.37-.77.44-1.25,1.34-2.25,2.54-2.83,1.2-.57,2.54-.65,3.79-.21,1.99.7,3.32,2.58,3.31,4.69,0,2.46-2.34,3.91-3.79,4.57v2.63c0,.33-.27.6-.6.6ZM13.21,19.1c0-.66-.54-1.2-1.2-1.2h-.03c-.66,0-1.19.54-1.19,1.2s.55,1.2,1.21,1.2,1.2-.54,1.2-1.2Z\"/></svg></i>\n                                    </div>\n                                    <div>Help</div>\n                                </div>\n                                <div class=\"zasdk-feedback-type\" data-type=\"report\">\n                                    <div class=\"zasdk-iconcnt zasdkfeedback__icon-appreciate\">\n                                        <i class=\"zasdkfeedback__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M20.47,16.72l-6.66-11.53c-.37-.65-1.07-1.05-1.81-1.05s-1.44.4-1.81,1.05l-6.66,11.53c-.37.65-.37,1.45,0,2.09.37.65,1.07,1.05,1.81,1.05h13.32c.75,0,1.44-.4,1.81-1.05.37-.64.37-1.45,0-2.09ZM19.17,18.06c-.11.18-.3.3-.51.3H5.34c-.21,0-.41-.11-.51-.3-.1-.18-.1-.41,0-.59l6.66-11.53h0c.11-.18.3-.3.51-.3s.41.11.51.3l6.66,11.53c.11.18.11.41,0,.59Z\"/><path d=\"M12.35,13.9s.37-4.72.37-4.72c.05-1.08-1.58-1.06-1.5.02l.48,4.71c.03.38.62.37.64,0Z\"/><path d=\"M11.97,15.06c-.52,0-.94.42-.94.94s.42.94.94.94.94-.42.94-.94-.42-.94-.94-.94Z\"/></svg></i>\n                                    </div>\n                                    <div>Report</div>\n                                </div>\n                            </div>\n                            <div id=\"zasdkFeedbackForm\" class=\"zasdk-form\">\n                                <label class=\"zasdkdesclbl\">User<span class=\"zasdkmadfeld\">*</span></label>\n                                <div id=\"zasdkEmailDropdown\" class=\"zasdk-custom-select\">\n                                    <div id=\"zasdkEmailTrigger\" class=\"zasdk-select-trigger\">\n                                        <span id=\"zasdkEmailLabel\" class=\"zasdk-select-label\">Anonymous</span>\n                                        <svg class=\"zasdk-select-arrow\" viewBox=\"0 0 12 8\" width=\"12\" height=\"8\"><path d=\"M1 1l5 5 5-5\" stroke=\"#999\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg>\n                                    </div>\n                                    <div id=\"zasdkEmailPanel\" class=\"zasdk-select-panel\" style=\"display:none\">\n                                        <ul id=\"zasdkEmailList\" class=\"zasdk-select-list\"></ul>\n                                    </div>\n                                </div>\n                                <label class=\"zasdkdesclbl\" for=\"zasdkDescription\">Add details here<span class=\"zasdkmadfeld\">*</span> <span class=\"zaleftcharspan\"><span class=\"zaleftcharcnt\">5000</span><span class=\"zaleftchartxt\">characters left</span></span></label>\n                                <textarea id=\"zasdkDescription\" name=\"description\" placeholder=\"Please provide more details for us to help you better.\" reqname=\"name\" maxlength=\"5000\"></textarea>\n                                <div id=\"zasdkreccheckcnt\" class=\"zasdkqz-container\">\n                                    <div class=\"zasdkqz-checkbox-wrapper\">\n                                        <input type=\"checkbox\" id=\"zasdkqz-consent\" class=\"zasdkqz-checkbox\">\n                                        <label for=\"zasdkqz-consent\">By agreeing to record screen, I allow the collection of the required information for further analysis.</label>\n                                    </div>\n                                    <div id=\"zasdkqz-content\" class=\"zasdkqz-content\">\n                                        <div class=\"zasdkqz-prop-content\">Data collected while screen recording.\n                                            <div class=\"zasdk_rec_hdr_icon zasdk-tooltip-container zasdk_rec_hdr\">\n                                                <i><svg viewBox=\"0 0 24 24\"><path d=\"M12,20.6c-4.74,0-8.6-3.86-8.6-8.6S7.26,3.4,12,3.4s8.6,3.86,8.6,8.6-3.86,8.6-8.6,8.6ZM12,4.6c-4.08,0-7.4,3.32-7.4,7.4s3.32,7.4,7.4,7.4,7.4-3.32,7.4-7.4-3.32-7.4-7.4-7.4ZM12.6,15.97v-4.91c0-.33-.27-.6-.6-.6s-.6.27-.6.6v4.91c0,.33.27.6.6.6s.6-.27.6-.6ZM12.61,9.03c0-.33-.27-.6-.6-.6h-.01c-.33,0-.59.27-.59.6s.28.6.61.6.6-.27.6-.6Z\"/></svg></i>\n                                                <div class=\"zasdk-tooltip-top zasdk-prop-info\">\n                                                    <ul>\n                                                        <li>- A recording of the window or region specified.</li>\n                                                        <li>- Audio captured during recording. (You can mute or re-record)</li>\n                                                        <li>- IP address.</li>\n                                                        <li>- Browser console logs generated while recording.</li>\n                                                        <li>- Device details (screen resolution, OS, and browser version).</li>\n                                                        <li>- Client-side performance metrics (DNS lookup time, TCP connection time, etc.).</li>\n                                                    </ul>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div id=\"zasdkqz_rec_button\" class=\"zasdkqz-button\">Start screen recording</div>\n                                    </div>\n                                </div>\n                                <div id=\"editRecordedVideo\" class=\"zasdk_recordedClipArea\" style=\"\">\n                                    <div id=\"recordScreenDesc\" class=\"zasdk_rec_hdr\"> Recorded Clip\n                                        <div class=\"zasdk_rec_hdr_icon zasdk-tooltip-container\">\n                                            <i><svg viewBox=\"0 0 24 24\"><path d=\"M12,20.6c-4.74,0-8.6-3.86-8.6-8.6S7.26,3.4,12,3.4s8.6,3.86,8.6,8.6-3.86,8.6-8.6,8.6ZM12,4.6c-4.08,0-7.4,3.32-7.4,7.4s3.32,7.4,7.4,7.4,7.4-3.32,7.4-7.4-3.32-7.4-7.4-7.4ZM12.6,15.97v-4.91c0-.33-.27-.6-.6-.6s-.6.27-.6.6v4.91c0,.33.27.6.6.6s.6-.27.6-.6ZM12.61,9.03c0-.33-.27-.6-.6-.6h-.01c-.33,0-.59.27-.59.6s.28.6.61.6.6-.27.6-.6Z\"/></svg></i>\n                                            <div class=\"zasdk-tooltip\">This recording will be sent along with your feedback for further analysis.</div>\n                                        </div>\n                                    </div>\n                                    <div class=\"zasdk_playEdit\">\n                                        <div class=\"zasdk_clipAreaButtonCnt zasdk-tooltip-container\">\n                                            <div id=\"preivewPlayButton\" class=\"zasdk_clipAreaButton\" title=\"Preview\">\n                                                <svg viewBox=\"0 0 24 24\"><path d=\"M6.24,20.6c-.2,0-.39-.05-.57-.15-.38-.21-.62-.61-.62-1.05V4.59c0-.44.24-.84.62-1.05.38-.21.85-.19,1.22.04l11.52,7.41c.34.22.55.6.55,1,0,.41-.2.78-.55,1l-11.52,7.41c-.2.13-.42.19-.64.19ZM6.56,4.1l-.33.5v14.81s11.52-7.41,11.52-7.41L6.23,4.6l.33-.5Z\"/></svg>\n                                            </div>\n                                            <div class=\"zasdk-tooltip\">Preview</div>\n                                        </div>\n                                        <div class=\"zasdk_clipAreaButtonCnt zasdk-tooltip-container\">\n                                            <div id=\"videoEditButton\" class=\"zasdk_clipAreaButton\">\n                                                <svg id=\"Layer_2\" viewBox=\"0 0 24 24\"><path d=\"M20.6,7.18c0-.58-.23-1.13-.65-1.54l-1.53-1.51c-.83-.83-2.29-.83-3.12,0l-1.31,1.3h0S4.88,14.41,4.88,14.41c-.12.12-.21.27-.26.44l-1.19,4.4c-.09.34,0,.7.26.95.19.18.44.29.7.29.09,0,.17-.01.26-.04l4.44-1.2c.16-.05.31-.13.44-.25l8.54-8.43h0s1.88-1.86,1.88-1.86c.06-.06.12-.12.17-.19h0c.31-.39.48-.86.48-1.36ZM8.72,18.12l-4.03,1.09,1.08-3.98L13.97,7.12l2.88,2.97-8.13,8.03ZM17.71,9.25l-2.88-2.97,1.32-1.3c.38-.38,1.04-.38,1.43,0l1.53,1.51c.19.18.29.43.29.69,0,.22-.08.43-.21.6h0s-.04.05-.08.08l-1.4,1.39Z\"/></svg>\n                                            </div>\n                                            <div class=\"zasdk-tooltip\">Edit</div>\n                                        </div>\n                                        <div class=\"zasdk_clipAreaButtonCnt zasdk-tooltip-container\">\n                                            <div id=\"videoDelButton\" class=\"zasdk_clipAreaButton\">\n                                                <svg id=\"Layer_2\" viewBox=\"0 0 24 24\"><path d=\"M19.2,6.6h-3.4v-1c0-1.21-.99-2.2-2.2-2.2h-3.2c-1.21,0-2.2.99-2.2,2.2v1h-3.4c-.33,0-.6.27-.6.6s.27.6.6.6h1v10.6c0,1.21.99,2.2,2.2,2.2h8c1.21,0,2.2-.99,2.2-2.2V7.8h1c.33,0,.6-.27.6-.6s-.27-.6-.6-.6ZM9.4,5.6c0-.55.45-1,1-1h3.2c.55,0,1,.45,1,1v1h-5.2v-1ZM17,18.4c0,.55-.45,1-1,1h-8c-.55,0-1-.45-1-1V7.8h10v10.6ZM11,11.2v4.8c0,.33-.27.6-.6.6s-.6-.27-.6-.6v-4.8c0-.33.27-.6.6-.6s.6.27.6.6ZM14.2,11.2v4.8c0,.33-.27.6-.6.6s-.6-.27-.6-.6v-4.8c0-.33.27-.6.6-.6s.6.27.6.6Z\"/></svg>\n                                            </div>\n                                            <div class=\"zasdk-tooltip\">Delete</div>\n                                        </div>\n                                    </div>\n                                    <div class=\"zasdk_videoPrev\">\n                                        <video id=\"previewVideoElemId\" width=\"320\" height=\"240\" src=\"\"></video>\n                                    </div>\n                                </div>\n\n                                <div class=\"zasdk-buttons\">\n                                    <div class=\"zasdk-btncnt\">\n                                        <div id=\"zasdkattachinfo\" class=\"zasdkattachinf\">Maximum 5 attachments with a total file size of 10MB is allowed</div>\n                                        <input type=\"file\" id=\"zasdkFileInput\" class=\"zasdk-file-input\" multiple accept=\".png, .jpg, .txt\">\n                                        <label id=\"zasdkAttachBtn\" class=\"zasdk-btn zasdk-attach-btn\" for=\"zasdkFileInput\">\n                                            <svg id=\"Layer_2\" viewBox=\"0 0 24 24\" style=\" width: 25px; \"><path d=\"M12,20.6c-2.63,0-4.78-2.14-4.78-4.78V6.78c0-1.87,1.52-3.38,3.38-3.38s3.38,1.52,3.38,3.38v9.04c0,1.1-.9,1.99-2,1.99s-1.99-.89-1.99-1.99V7.48c0-.33.27-.6.6-.6h0c.33,0,.6.27.6.6v8.35c0,.44.35.79.79.79s.79-.36.79-.79V6.78c0-1.2-.98-2.18-2.18-2.18s-2.18.98-2.18,2.18v9.04c0,1.97,1.6,3.58,3.58,3.58s3.58-1.6,3.58-3.58V6.78c0-.33.27-.6.6-.6s.6.27.6.6v9.04c0,2.63-2.14,4.78-4.78,4.78Z\"/></svg>\n                                            <span>Attachments</span>\n                                        </label>\n                                        <div id=\"zasdkfilesizeinfo\" class=\"zasdkfilesizeinf\"></div>\n                                        <ul id=\"zasakfileList\" class=\"zasakfilelstcnt\"></ul>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"zasdk-toggles-section\">\n                                <div class=\"zasdk-toggle-row\">\n                                    <div class=\"zasdk-toggle-info\">\n                                        <span class=\"zasdk-toggle-label\">Include System Logs</span>\n                                        <span class=\"zasdk-view-link\" id=\"zasdkViewLogsBtn\">View</span>\n                                    </div>\n                                    <label class=\"zasdk-switch\">\n                                        <input type=\"checkbox\" id=\"zasdkIncludeLogToggle\">\n                                        <span class=\"zasdk-slider\"></span>\n                                    </label>\n                                </div>\n                                <div class=\"zasdk-toggle-separator\"></div>\n                                <div class=\"zasdk-toggle-row\">\n                                    <div class=\"zasdk-toggle-info\">\n                                        <span class=\"zasdk-toggle-label\">Include Diagnostic Information</span>\n                                        <span class=\"zasdk-view-link\" id=\"zasdkViewDiagBtn\">View</span>\n                                    </div>\n                                    <label class=\"zasdk-switch\">\n                                        <input type=\"checkbox\" id=\"zasdkIncludeDiagToggle\">\n                                        <span class=\"zasdk-slider\"></span>\n                                    </label>\n                                </div>\n                            </div>\n                            <div class=\"zasdk_submit_btncnt\">\n                                <div id=\"zasdksubmitstatus\" class=\"zasdkstsmsg\" style=\"display:none;\" ></div>\n                                <div id=\"zasdk_submit_btnsubcnt\" class=\"zasdk_submit_btnsubcnt\">\n                                    <input type=\"button\" id=\"zasdk_submit_btn\" class=\"zasdk-btn zasdk-send-btn zasdkbtndisableclr\" value=\"Send\">\n                                </div>\n                            </div>\n                            <div id=\"zasdkDataViewer\" class=\"zasdk-data-viewer\" style=\"display:none\">\n                                <div class=\"zasdk-viewer-hdr\">\n                                    <span id=\"zasdkViewerClose\" class=\"zasdk-viewer-back\"><svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\"><path d=\"M15 19l-7-7 7-7\" stroke=\"#333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></span>\n                                    <span id=\"zasdkViewerTitle\" class=\"zasdk-viewer-title\"></span>\n                                </div>\n                                <pre id=\"zasdkViewerContent\" class=\"zasdk-viewer-content\"></pre>\n                            </div>\n                        </div>";
+export declare const feedbackUIHtml = "<div id=\"zasdkFeedbackconatiner\" class=\"zasdk-modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"zasdkFeedbackTitle\">\n                            <div class=\"zasdk-header\">\n                                <h2 id=\"zasdkFeedbackTitle\" class=\"zasdk-title\">Share feedback</h2>\n                                <span id=\"appticsfeedbackclose\" class=\"zasdk-close\" role=\"button\" tabindex=\"0\" aria-label=\"Close\"><svg viewBox=\"0 0 24 24\" style=\" width: 20px; \"><path d=\"M19.92,19.08c.23.23.23.61,0,.85-.12.12-.27.18-.42.18s-.31-.06-.42-.18l-7.08-7.08-7.08,7.08c-.12.12-.27.18-.42.18s-.31-.06-.42-.18c-.23-.23-.23-.61,0-.85l7.08-7.08-7.08-7.08c-.23-.23-.23-.61,0-.85s.61-.23.85,0l7.08,7.08,7.08-7.08c.23-.23.61-.23.85,0s.23.61,0,.85l-7.08,7.08,7.08,7.08Z\"/></svg></span>\n                            </div>\n                            <div class=\"zasdk-feedback-types\" data-type=\"\">\n                                <div class=\"zasdk-feedback-type zasdk-selected\" data-type=\"feedback\">\n                                    <div class=\"zasdk-iconcnt zasdkfeedback__icon-reqest\">\n                                        <i class=\"zasdkfeedback__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M6.69,9.25h10.81c.41,0,.75-.34.75-.75s-.34-.75-.75-.75H6.69c-.41,0-.75.34-.75.75s.34.75.75.75Z\"/><path d=\"M6.69,13.07h8.11c.41,0,.75-.34.75-.75s-.34-.75-.75-.75H6.69c-.41,0-.75.34-.75.75s.34.75.75.75Z\"/><path d=\"M20.72,5.17c0-.68-.55-1.23-1.23-1.23H4.48c-.68,0-1.23.55-1.23,1.23v11.84c0,.68.55,1.23,1.23,1.23h13.49l1.25,1.51c.17.2.41.31.67.31.1,0,.2-.02.3-.05.34-.13.57-.46.56-.83l-.03-14.01ZM19.22,17.39l-.17-.2c-.24-.29-.58-.45-.95-.45H4.75V5.44h14.47v11.95Z\"/></svg></i>\n                                    </div>\n                                    <div>Feedback</div>\n                                </div>\n                                <div class=\"zasdk-feedback-type\" data-type=\"bug\">\n                                    <div class=\"zasdk-iconcnt zasdkfeedback__icon-report\">\n                                        <i class=\"zasdkfeedback__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M15.6,6.58c-.13-.37-.3-.7-.5-.97l1.23-1.18c.24-.23.25-.61.02-.85-.23-.24-.61-.25-.85-.02l-1.26,1.21c-.66-.45-1.37-.62-1.79-.68-.25-.04-.51-.04-.76-.02-.83.08-1.45.35-1.93.7l-1.22-1.2c-.24-.23-.62-.23-.85,0-.23.24-.23.62,0,.85l1.21,1.19c-.24.34-.41.68-.51.96-2.02,1.37-3.27,3.82-3.27,6.44,0,4.18,3.08,7.58,6.87,7.58s6.87-3.4,6.87-7.58c0-2.62-1.25-5.06-3.26-6.44ZM11.82,5.27c.15-.02.31-.01.47.01.69.1,1.86.48,2.26,1.9-.17.17-.51.44-1.14.65-1.08.36-2.31.28-3.36-.23-.24-.11-.44-.23-.6-.36,0-.01,0-.03.01-.04.18-.65.73-1.77,2.36-1.93ZM12,19.4c-3.12,0-5.67-2.86-5.67-6.38,0-1.98.82-3.82,2.19-5.02.26.25.59.48,1.01.68.78.38,1.65.57,2.5.57.6,0,1.19-.09,1.76-.28.88-.29,1.39-.7,1.67-1,1.38,1.2,2.21,3.06,2.21,5.05,0,3.52-2.54,6.38-5.67,6.38ZM9.12,9.86c-.92,0-1.67.75-1.67,1.67s.75,1.67,1.67,1.67,1.67-.75,1.67-1.67-.75-1.67-1.67-1.67ZM9.12,11.99c-.26,0-.47-.21-.47-.47s.21-.47.47-.47.47.21.47.47-.21.47-.47.47ZM14.88,9.86c-.92,0-1.67.75-1.67,1.67s.75,1.67,1.67,1.67,1.67-.75,1.67-1.67-.75-1.67-1.67-1.67ZM14.88,11.99c-.26,0-.47-.21-.47-.47s.21-.47.47-.47.47.21.47.47-.21.47-.47.47ZM12,14.49c-.92,0-1.67.75-1.67,1.67s.75,1.67,1.67,1.67,1.67-.75,1.67-1.67-.75-1.67-1.67-1.67ZM12,16.62c-.26,0-.47-.21-.47-.47s.21-.47.47-.47.47.21.47.47-.21.47-.47.47Z\"/></svg></i>\n                                    </div>\n                                    <div>Bug</div>\n                                </div>\n                                <div class=\"zasdk-feedback-type\" data-type=\"help\">\n                                    <div class=\"zasdk-iconcnt zasdkfeedback__icon-help\">\n                                        <i class=\"zasdkfeedback__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12.45,16.47c-.33,0-.6-.27-.6-.6v-2.7c0-.43.25-.82.64-.99.95-.42,3.15-1.62,3.15-3.51,0-1.6-1.01-3.03-2.51-3.55-.95-.33-1.97-.28-2.87.16-.91.43-1.59,1.2-1.92,2.14-.11.31-.45.48-.77.37-.31-.11-.48-.45-.37-.77.44-1.25,1.34-2.25,2.54-2.83,1.2-.57,2.54-.65,3.79-.21,1.99.7,3.32,2.58,3.31,4.69,0,2.46-2.34,3.91-3.79,4.57v2.63c0,.33-.27.6-.6.6ZM13.21,19.1c0-.66-.54-1.2-1.2-1.2h-.03c-.66,0-1.19.54-1.19,1.2s.55,1.2,1.21,1.2,1.2-.54,1.2-1.2Z\"/></svg></i>\n                                    </div>\n                                    <div>Help</div>\n                                </div>\n                                <div class=\"zasdk-feedback-type\" data-type=\"report\">\n                                    <div class=\"zasdk-iconcnt zasdkfeedback__icon-appreciate\">\n                                        <i class=\"zasdkfeedback__icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M20.47,16.72l-6.66-11.53c-.37-.65-1.07-1.05-1.81-1.05s-1.44.4-1.81,1.05l-6.66,11.53c-.37.65-.37,1.45,0,2.09.37.65,1.07,1.05,1.81,1.05h13.32c.75,0,1.44-.4,1.81-1.05.37-.64.37-1.45,0-2.09ZM19.17,18.06c-.11.18-.3.3-.51.3H5.34c-.21,0-.41-.11-.51-.3-.1-.18-.1-.41,0-.59l6.66-11.53h0c.11-.18.3-.3.51-.3s.41.11.51.3l6.66,11.53c.11.18.11.41,0,.59Z\"/><path d=\"M12.35,13.9s.37-4.72.37-4.72c.05-1.08-1.58-1.06-1.5.02l.48,4.71c.03.38.62.37.64,0Z\"/><path d=\"M11.97,15.06c-.52,0-.94.42-.94.94s.42.94.94.94.94-.42.94-.94-.42-.94-.94-.94Z\"/></svg></i>\n                                    </div>\n                                    <div>Report</div>\n                                </div>\n                            </div>\n                            <div class=\"zasdk-body\">\n                            <div id=\"zasdkFeedbackForm\" class=\"zasdk-form\">\n                                <label class=\"zasdkdesclbl\">User<span class=\"zasdkmadfeld\">*</span></label>\n                                <div id=\"zasdkEmailDropdown\" class=\"zasdk-custom-select\">\n                                    <div id=\"zasdkEmailTrigger\" class=\"zasdk-select-trigger\">\n                                        <span id=\"zasdkEmailLabel\" class=\"zasdk-select-label\">Anonymous</span>\n                                        <svg class=\"zasdk-select-arrow\" viewBox=\"0 0 12 8\" width=\"12\" height=\"8\"><path d=\"M1 1l5 5 5-5\" stroke=\"#999\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg>\n                                    </div>\n                                    <div id=\"zasdkEmailPanel\" class=\"zasdk-select-panel\" style=\"display:none\">\n                                        <ul id=\"zasdkEmailList\" class=\"zasdk-select-list\"></ul>\n                                    </div>\n                                </div>\n                                <label class=\"zasdkdesclbl\" for=\"zasdkDescription\">Add details here<span class=\"zasdkmadfeld\">*</span> <span class=\"zaleftcharspan\"><span class=\"zaleftcharcnt\">5000</span><span class=\"zaleftchartxt\">characters left</span></span></label>\n                                <textarea id=\"zasdkDescription\" name=\"description\" placeholder=\"Please provide more details for us to help you better.\" reqname=\"name\" maxlength=\"5000\"></textarea>\n                                <div id=\"zasdkreccheckcnt\" class=\"zasdkqz-container\">\n                                    <div class=\"zasdkqz-checkbox-wrapper\">\n                                        <input type=\"checkbox\" id=\"zasdkqz-consent\" class=\"zasdkqz-checkbox\">\n                                        <label for=\"zasdkqz-consent\">By agreeing to record screen, I allow the collection of the required information for further analysis.</label>\n                                    </div>\n                                    <div id=\"zasdkqz-content\" class=\"zasdkqz-content\">\n                                        <div class=\"zasdkqz-prop-content\">Data collected while screen recording.\n                                            <div class=\"zasdk_rec_hdr_icon zasdk-tooltip-container zasdk_rec_hdr\">\n                                                <i><svg viewBox=\"0 0 24 24\"><path d=\"M12,20.6c-4.74,0-8.6-3.86-8.6-8.6S7.26,3.4,12,3.4s8.6,3.86,8.6,8.6-3.86,8.6-8.6,8.6ZM12,4.6c-4.08,0-7.4,3.32-7.4,7.4s3.32,7.4,7.4,7.4,7.4-3.32,7.4-7.4-3.32-7.4-7.4-7.4ZM12.6,15.97v-4.91c0-.33-.27-.6-.6-.6s-.6.27-.6.6v4.91c0,.33.27.6.6.6s.6-.27.6-.6ZM12.61,9.03c0-.33-.27-.6-.6-.6h-.01c-.33,0-.59.27-.59.6s.28.6.61.6.6-.27.6-.6Z\"/></svg></i>\n                                                <div class=\"zasdk-tooltip-top zasdk-prop-info\">\n                                                    <ul>\n                                                        <li>- A recording of the window or region specified.</li>\n                                                        <li>- Audio captured during recording. (You can mute or re-record)</li>\n                                                        <li>- IP address.</li>\n                                                        <li>- Browser console logs generated while recording.</li>\n                                                        <li>- Device details (screen resolution, OS, and browser version).</li>\n                                                        <li>- Client-side performance metrics (DNS lookup time, TCP connection time, etc.).</li>\n                                                    </ul>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div id=\"zasdkqz_rec_button\" class=\"zasdkqz-button\">Start screen recording</div>\n                                    </div>\n                                </div>\n                                <div id=\"zasdkrecstatus\" class=\"zasdk-recstatus\" style=\"display:none\">\n                                    <div class=\"zasdk-timer-control\"><div class=\"zasdk-timer-stopcricle\"></div></div>\n                                    <span class=\"zasdk-recstatus-text\">Recording in progress</span>\n                                    <span id=\"zasdkRecStatusTime\" class=\"zasdk-timer-display\">05:00</span>\n                                    <div id=\"zasdkRecStatusStop\" class=\"zasdkqz-button zasdk-recstatus-stop\" role=\"button\" tabindex=\"0\">Stop recording</div>\n                                </div>\n                                <div id=\"editRecordedVideo\" class=\"zasdk_recordedClipArea\" style=\"\">\n                                    <div id=\"recordScreenDesc\" class=\"zasdk_rec_hdr\"> Recorded Clip\n                                        <div class=\"zasdk_rec_hdr_icon zasdk-tooltip-container\">\n                                            <i><svg viewBox=\"0 0 24 24\"><path d=\"M12,20.6c-4.74,0-8.6-3.86-8.6-8.6S7.26,3.4,12,3.4s8.6,3.86,8.6,8.6-3.86,8.6-8.6,8.6ZM12,4.6c-4.08,0-7.4,3.32-7.4,7.4s3.32,7.4,7.4,7.4,7.4-3.32,7.4-7.4-3.32-7.4-7.4-7.4ZM12.6,15.97v-4.91c0-.33-.27-.6-.6-.6s-.6.27-.6.6v4.91c0,.33.27.6.6.6s.6-.27.6-.6ZM12.61,9.03c0-.33-.27-.6-.6-.6h-.01c-.33,0-.59.27-.59.6s.28.6.61.6.6-.27.6-.6Z\"/></svg></i>\n                                            <div class=\"zasdk-tooltip\">This recording will be sent along with your feedback for further analysis.</div>\n                                        </div>\n                                    </div>\n                                    <div class=\"zasdk_playEdit\">\n                                        <div class=\"zasdk_clipAreaButtonCnt zasdk-tooltip-container\">\n                                            <div id=\"preivewPlayButton\" class=\"zasdk_clipAreaButton\" title=\"Preview\">\n                                                <svg viewBox=\"0 0 24 24\"><path d=\"M6.24,20.6c-.2,0-.39-.05-.57-.15-.38-.21-.62-.61-.62-1.05V4.59c0-.44.24-.84.62-1.05.38-.21.85-.19,1.22.04l11.52,7.41c.34.22.55.6.55,1,0,.41-.2.78-.55,1l-11.52,7.41c-.2.13-.42.19-.64.19ZM6.56,4.1l-.33.5v14.81s11.52-7.41,11.52-7.41L6.23,4.6l.33-.5Z\"/></svg>\n                                            </div>\n                                            <div class=\"zasdk-tooltip\">Preview</div>\n                                        </div>\n                                        <div class=\"zasdk_clipAreaButtonCnt zasdk-tooltip-container\">\n                                            <div id=\"videoEditButton\" class=\"zasdk_clipAreaButton\">\n                                                <svg id=\"Layer_2\" viewBox=\"0 0 24 24\"><path d=\"M20.6,7.18c0-.58-.23-1.13-.65-1.54l-1.53-1.51c-.83-.83-2.29-.83-3.12,0l-1.31,1.3h0S4.88,14.41,4.88,14.41c-.12.12-.21.27-.26.44l-1.19,4.4c-.09.34,0,.7.26.95.19.18.44.29.7.29.09,0,.17-.01.26-.04l4.44-1.2c.16-.05.31-.13.44-.25l8.54-8.43h0s1.88-1.86,1.88-1.86c.06-.06.12-.12.17-.19h0c.31-.39.48-.86.48-1.36ZM8.72,18.12l-4.03,1.09,1.08-3.98L13.97,7.12l2.88,2.97-8.13,8.03ZM17.71,9.25l-2.88-2.97,1.32-1.3c.38-.38,1.04-.38,1.43,0l1.53,1.51c.19.18.29.43.29.69,0,.22-.08.43-.21.6h0s-.04.05-.08.08l-1.4,1.39Z\"/></svg>\n                                            </div>\n                                            <div class=\"zasdk-tooltip\">Edit</div>\n                                        </div>\n                                        <div class=\"zasdk_clipAreaButtonCnt zasdk-tooltip-container\">\n                                            <div id=\"videoDelButton\" class=\"zasdk_clipAreaButton\">\n                                                <svg id=\"Layer_2\" viewBox=\"0 0 24 24\"><path d=\"M19.2,6.6h-3.4v-1c0-1.21-.99-2.2-2.2-2.2h-3.2c-1.21,0-2.2.99-2.2,2.2v1h-3.4c-.33,0-.6.27-.6.6s.27.6.6.6h1v10.6c0,1.21.99,2.2,2.2,2.2h8c1.21,0,2.2-.99,2.2-2.2V7.8h1c.33,0,.6-.27.6-.6s-.27-.6-.6-.6ZM9.4,5.6c0-.55.45-1,1-1h3.2c.55,0,1,.45,1,1v1h-5.2v-1ZM17,18.4c0,.55-.45,1-1,1h-8c-.55,0-1-.45-1-1V7.8h10v10.6ZM11,11.2v4.8c0,.33-.27.6-.6.6s-.6-.27-.6-.6v-4.8c0-.33.27-.6.6-.6s.6.27.6.6ZM14.2,11.2v4.8c0,.33-.27.6-.6.6s-.6-.27-.6-.6v-4.8c0-.33.27-.6.6-.6s.6.27.6.6Z\"/></svg>\n                                            </div>\n                                            <div class=\"zasdk-tooltip\">Delete</div>\n                                        </div>\n                                    </div>\n                                    <div class=\"zasdk_videoPrev\">\n                                        <video id=\"previewVideoElemId\" width=\"320\" height=\"240\" src=\"\"></video>\n                                    </div>\n                                </div>\n\n                                <div class=\"zasdk-buttons\">\n                                    <div class=\"zasdk-btncnt\">\n                                        <div id=\"zasdkattachinfo\" class=\"zasdkattachinf\">Maximum 5 attachments with a total file size of 10MB is allowed</div>\n                                        <input type=\"file\" id=\"zasdkFileInput\" class=\"zasdk-file-input\" multiple accept=\".png, .jpg, .txt\">\n                                        <label id=\"zasdkAttachBtn\" class=\"zasdk-btn zasdk-attach-btn\" for=\"zasdkFileInput\">\n                                            <svg id=\"Layer_2\" viewBox=\"0 0 24 24\" style=\" width: 25px; \"><path d=\"M12,20.6c-2.63,0-4.78-2.14-4.78-4.78V6.78c0-1.87,1.52-3.38,3.38-3.38s3.38,1.52,3.38,3.38v9.04c0,1.1-.9,1.99-2,1.99s-1.99-.89-1.99-1.99V7.48c0-.33.27-.6.6-.6h0c.33,0,.6.27.6.6v8.35c0,.44.35.79.79.79s.79-.36.79-.79V6.78c0-1.2-.98-2.18-2.18-2.18s-2.18.98-2.18,2.18v9.04c0,1.97,1.6,3.58,3.58,3.58s3.58-1.6,3.58-3.58V6.78c0-.33.27-.6.6-.6s.6.27.6.6v9.04c0,2.63-2.14,4.78-4.78,4.78Z\"/></svg>\n                                            <span>Attachments</span>\n                                        </label>\n                                        <div id=\"zasdkfilesizeinfo\" class=\"zasdkfilesizeinf\"></div>\n                                        <ul id=\"zasakfileList\" class=\"zasakfilelstcnt\"></ul>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"zasdk-toggles-section\">\n                                <div class=\"zasdk-toggle-row\">\n                                    <div class=\"zasdk-toggle-info\">\n                                        <span class=\"zasdk-toggle-label\">Include System Logs</span>\n                                        <span class=\"zasdk-view-link\" id=\"zasdkViewLogsBtn\">View</span>\n                                    </div>\n                                    <label class=\"zasdk-switch\">\n                                        <input type=\"checkbox\" id=\"zasdkIncludeLogToggle\">\n                                        <span class=\"zasdk-slider\"></span>\n                                    </label>\n                                </div>\n                                <div class=\"zasdk-toggle-separator\"></div>\n                                <div class=\"zasdk-toggle-row\">\n                                    <div class=\"zasdk-toggle-info\">\n                                        <span class=\"zasdk-toggle-label\">Include Diagnostic Information</span>\n                                        <span class=\"zasdk-view-link\" id=\"zasdkViewDiagBtn\">View</span>\n                                    </div>\n                                    <label class=\"zasdk-switch\">\n                                        <input type=\"checkbox\" id=\"zasdkIncludeDiagToggle\">\n                                        <span class=\"zasdk-slider\"></span>\n                                    </label>\n                                </div>\n                            </div>\n                            </div>\n                            <div class=\"zasdk_submit_btncnt\">\n                                <div id=\"zasdksubmitstatus\" class=\"zasdkstsmsg\" style=\"display:none;\" ></div>\n                                <div id=\"zasdk_submit_btnsubcnt\" class=\"zasdk_submit_btnsubcnt\">\n                                    <input type=\"button\" id=\"zasdk_submit_btn\" class=\"zasdk-btn zasdk-send-btn zasdkbtndisableclr\" value=\"Send\">\n                                </div>\n                            </div>\n                            <div id=\"zasdkDataViewer\" class=\"zasdk-data-viewer\" style=\"display:none\">\n                                <div class=\"zasdk-viewer-hdr\">\n                                    <span id=\"zasdkViewerClose\" class=\"zasdk-viewer-back\"><svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\"><path d=\"M15 19l-7-7 7-7\" stroke=\"#333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></span>\n                                    <span id=\"zasdkViewerTitle\" class=\"zasdk-viewer-title\"></span>\n                                </div>\n                                <pre id=\"zasdkViewerContent\" class=\"zasdk-viewer-content\"></pre>\n                            </div>\n                        </div>";
 export declare const timerHtml = "<div id=\"zasdkrectimer\" class=\"zasdk-timer-container zasdk-tooltip-container\">\n                    <div class=\"zasdk-timer-control\" id=\"zasdkRecordButton\"><div class=\"zasdk-timer-stopcricle\"></div></div>\n                    <span class=\"zasdk-timer-display\" id=\"zasdkTimerDisplay\">05:00</span>\n                    <div class=\"zasdk-tooltip-top\">Stop Recording</div>\n                </div>";

package/dist/cjs/feedback/template.js

@@ -1,4 +1,4 @@
-/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.2 | (c) Zoho Corporation Private Limited | see LICENSE */
 'use strict';
 
 // Feedback modal markup (moved from js/apptics.js).
@@ -33,6 +33,7 @@ const feedbackUIHtml = `<div id="zasdkFeedbackconatiner" class="zasdk-modal-cont
                                     <div>Report</div>
                                 </div>
                             </div>
+                            <div class="zasdk-body">
                             <div id="zasdkFeedbackForm" class="zasdk-form">
                                 <label class="zasdkdesclbl">User<span class="zasdkmadfeld">*</span></label>
                                 <div id="zasdkEmailDropdown" class="zasdk-custom-select">
@@ -70,6 +71,12 @@ const feedbackUIHtml = `<div id="zasdkFeedbackconatiner" class="zasdk-modal-cont
                                         <div id="zasdkqz_rec_button" class="zasdkqz-button">Start screen recording</div>
                                     </div>
                                 </div>
+                                <div id="zasdkrecstatus" class="zasdk-recstatus" style="display:none">
+                                    <div class="zasdk-timer-control"><div class="zasdk-timer-stopcricle"></div></div>
+                                    <span class="zasdk-recstatus-text">Recording in progress</span>
+                                    <span id="zasdkRecStatusTime" class="zasdk-timer-display">05:00</span>
+                                    <div id="zasdkRecStatusStop" class="zasdkqz-button zasdk-recstatus-stop" role="button" tabindex="0">Stop recording</div>
+                                </div>
                                 <div id="editRecordedVideo" class="zasdk_recordedClipArea" style="">
                                     <div id="recordScreenDesc" class="zasdk_rec_hdr"> Recorded Clip
                                         <div class="zasdk_rec_hdr_icon zasdk-tooltip-container">
@@ -138,6 +145,7 @@ const feedbackUIHtml = `<div id="zasdkFeedbackconatiner" class="zasdk-modal-cont
                                     </label>
                                 </div>
                             </div>
+                            </div>
                             <div class="zasdk_submit_btncnt">
                                 <div id="zasdksubmitstatus" class="zasdkstsmsg" style="display:none;" ></div>
                                 <div id="zasdk_submit_btnsubcnt" class="zasdk_submit_btnsubcnt">

package/dist/cjs/feedback/ui.d.ts

@@ -45,7 +45,10 @@ export interface FeedbackUI {
     close(): void;
     /** Escape closes the form; listened for from open to close. */
     onEscape(e: KeyboardEvent): void;
+    dismiss(): void;
+    showRecordingStatus(on: boolean): void;
     toggleWindowAnimation(): void;
+    finishHiding(): void;
     fileAttachment(): void;
     elementCreator<K extends keyof HTMLElementTagNameMap>(elType: K): HTMLElementTagNameMap[K];
     fileLimitExceeded(limitReached: boolean, filesLengthReached?: boolean): void;
@@ -54,6 +57,10 @@ export interface FeedbackUI {
     toggleRecording(): void;
     startRecording(): void;
     stopRecording(): void;
+    /** The recording has ended, however it ended: the form comes back, with the preview. */
+    recordingEnded(): void;
+    /** The form back in sight after a recording took it out. */
+    showForm(): void;
     submitRecording(): void;
     updateTimer(): void;
     updateDisplay(): void;

package/dist/cjs/feedback/ui.js

@@ -1,4 +1,4 @@
-/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.2 | (c) Zoho Corporation Private Limited | see LICENSE */
 'use strict';
 
 var constants = require('../core/constants.js');
@@ -24,6 +24,12 @@ const QUARTZ_NOOP = {
     submitRecording() { return Promise.resolve({}); }
 };
 const QUARTZ_CONSTANTS_NOOP = { ErrorType: {}, FeedbackState: {} };
+/** From Quartz's RECORDING_IN_PROGRESS until the form has come back from it. */
+var recordingInProgress = false;
+/** Send was pressed during a recording: it is sent, recording and all, once the recording has ended. */
+var sendWhenEnded = false;
+/** How long the form takes to shrink away when a recording starts: the stylesheet's transition. */
+const HIDE_MS = 300;
 function hasQuartz() {
     return typeof Quartz !== 'undefined' && !!Quartz; // no i18n
 }
@@ -42,11 +48,12 @@ function submitFeedback(dataobj) {
         if (!result) {
             return null;
         }
-        feedback.handleStatusmsg(result.ok, result.message);
         if (result.ok) {
-            setTimeout(() => {
-                feedback.close();
-            }, 2000);
+            // sent: the form goes at once rather than holding the page for the success line
+            feedback.close();
+        }
+        else {
+            feedback.handleStatusmsg(result.ok, result.message);
         }
         return result;
     });
@@ -206,6 +213,12 @@ const feedback = {
         feedback._opts = opts || {};
         var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
         if (!utils.isEmpty(modal)) {
+            // already open. A recording takes the form out of sight, and one that ended without the
+            // form hearing of it would leave it there, every later open a no-op. Asked to open, it
+            // comes back; a recording still going carries on, and its end is handled as ever
+            if (feedback.isHidden || feedback.isScaled) {
+                feedback.showForm();
+            }
             return;
         }
         const tempContainer = document.createElement('div'); // no i18n
@@ -259,10 +272,21 @@ const feedback = {
             });
         }
         feedbackbox.addEventListener('transitionend', function (event) {
-            if (event.propertyName === 'transform' && feedback.isScaled) { // no i18n
-                feedback.toggleWindowAnimation();
+            if (event.propertyName === 'transform') { // no i18n
+                feedback.finishHiding();
             }
         });
+        // the form, opened again while a recording goes on, says so and can stop it
+        const recStop = modal.querySelector('#zasdkRecStatusStop'); // no i18n
+        recStop.onclick = function () {
+            feedback.stopRecording();
+        };
+        recStop.onkeydown = function (e) {
+            if (e.key === 'Enter' || e.key === ' ') { // no i18n
+                e.preventDefault();
+                feedback.stopRecording();
+            }
+        };
         quartzrecbtn.onclick = function (e) {
             e.stopImmediatePropagation();
             let recordingDetails = {
@@ -284,13 +308,13 @@ const feedback = {
             quartz().startRecording(recordingDetails);
         };
         closeBtn.onclick = function () {
-            feedback.close();
+            feedback.dismiss();
         };
         // keyboard: Enter or Space on the close control, and Escape anywhere, close the form
         closeBtn.onkeydown = function (e) {
             if (e.key === 'Enter' || e.key === ' ') { // no i18n
                 e.preventDefault();
-                feedback.close();
+                feedback.dismiss();
             }
         };
         document.addEventListener('keydown', feedback.onEscape); // no i18n
@@ -316,6 +340,12 @@ const feedback = {
             submitbtncnt.classList.add('zasdkbtndisabled'); // no i18n
             submitbtn.value = '';
             try {
+                if (recordingInProgress) {
+                    // sent with the recording: stopped first, and sent once Quartz has stored it
+                    sendWhenEnded = true;
+                    feedback.stopRecording();
+                    return;
+                }
                 let videoElement = modal.querySelector('#previewVideoElemId'), // no i18n
                 videoVisible = videoElement && videoElement.offsetParent !== null;
                 if (videoVisible) {
@@ -456,7 +486,14 @@ const feedback = {
     },
     bindQuartzEvent: function (event) {
         let feedbackState = event.detail.feedbackState;
+        if (feedbackState == quartzConstants().FeedbackState.RECORDING_COMPLETED) {
+            // Quartz's own stop control and the browser's "Stop sharing" end the recording without
+            // the SDK's timer; this is the only word of it the form gets
+            feedback.recordingEnded();
+            return;
+        }
         if (feedbackState == quartzConstants().FeedbackState.RECORDING_IN_PROGRESS) {
+            recordingInProgress = true;
             var feedbacktimer = document.getElementById("zasdkrectimer"); // no i18n
             if (!utils.isEmpty(feedbacktimer)) {
                 feedbacktimer.remove();
@@ -467,6 +504,8 @@ const feedback = {
             node.setAttribute('data-zasdk-theme', state._ZAP._config.feedback_theme); // no i18n
             document.body.appendChild(node);
             var feedbacktimer = document.getElementById("zasdkrectimer"); // no i18n
+            // draggable anywhere on the page; wired before the click that stops the recording
+            controls.wireTimerDrag(feedbacktimer);
             feedback.timerDisplay = feedbacktimer.querySelector('#zasdkTimerDisplay'); // no i18n
             feedback.recordButton = feedbacktimer;
             feedback.TOTAL_TIME = 5 * 60; // 5 minutes in seconds
@@ -474,12 +513,35 @@ const feedback = {
             feedback.isRecording = true;
             feedback.recordButton.addEventListener('click', feedback.toggleRecording); // no i18n
             feedback.startRecording();
+            feedback.updateDisplay();
+            feedback.showRecordingStatus(true);
             feedback.toggleWindowAnimation();
         }
     },
     onEscape: function (e) {
         if (e.key === 'Escape') { // no i18n
-            feedback.close();
+            feedback.dismiss();
+        }
+    },
+    dismiss: function () {
+        // the form's own close (its X, Escape) during a recording puts it out of sight rather than
+        // throwing away what was typed: the recording goes on, and the next open brings it all back
+        if (recordingInProgress) {
+            if (!feedback.isScaled && !feedback.isHidden) {
+                feedback.toggleWindowAnimation();
+            }
+            return;
+        }
+        feedback.close();
+    },
+    showRecordingStatus: function (on) {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        if (!modal) {
+            return;
+        }
+        modal.querySelector("#zasdkrecstatus").style.display = on ? "flex" : "none"; // no i18n
+        if (on) {
+            modal.querySelector("#zasdkreccheckcnt").style.display = "none"; // no i18n
         }
     },
     close: function () {
@@ -487,6 +549,16 @@ const feedback = {
         document.removeEventListener('keydown', feedback.onEscape); // no i18n
         document.removeEventListener('quartz-feedback-state', feedback.bindQuartzEvent); // no i18n
         quartz().clearFeedback();
+        // the recording goes with the form: no timer left on the page, and the next form starts clean
+        recordingInProgress = false;
+        sendWhenEnded = false;
+        feedback.isRecording = false;
+        clearInterval(feedback.timerInterval || undefined);
+        feedback.timerInterval = null;
+        var timer = document.getElementById("zasdkrectimer"); // no i18n
+        if (timer) {
+            timer.remove();
+        }
         if (!utils.isEmpty(modal)) {
             modal.remove();
         }
@@ -495,23 +567,29 @@ const feedback = {
         var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
         const box = modal.querySelector('#zasdkFeedbackconatiner'); // no i18n
         if (feedback.isHidden) {
-            modal.style.display = 'block'; // no i18n
-            setTimeout(() => {
-                box.style.transform = 'scale(1)'; // no i18n
-                feedback.validateFeedbackField();
-            }, 10);
-            feedback.isHidden = false;
-            feedback.isScaled = false;
+            feedback.showForm();
         }
         else if (feedback.isScaled) {
-            modal.style.display = 'none'; // no i18n
-            feedback.isHidden = true;
+            feedback.finishHiding();
         }
         else {
+            // shrinks away (the stylesheet's transition), and is taken off the page once it has;
+            // the timeout covers a page where the transition does not run (reduced motion)
             box.style.transform = 'scale(0)'; // no i18n
+            box.style.opacity = '0'; // no i18n
             feedback.isScaled = true;
+            setTimeout(feedback.finishHiding, HIDE_MS + 50);
         }
     },
+    finishHiding: function () {
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        // once only, and not when the form was brought back meanwhile
+        if (!modal || !feedback.isScaled || feedback.isHidden) {
+            return;
+        }
+        modal.style.display = 'none'; // no i18n
+        feedback.isHidden = true;
+    },
     fileAttachment: function () {
         var uploadedFiles = feedback.fileInput.files;
         feedback.uploadTotalSize = 0;
@@ -625,16 +703,65 @@ const feedback = {
         }
     },
     stopRecording: function () {
-        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        if (!recordingInProgress) {
+            // Quartz has ended it already (its RECORDING_COMPLETED came first): asking again
+            // only gets a "no recording in progress" error shown in the form
+            return;
+        }
         clearInterval(feedback.timerInterval || undefined);
         feedback.timerInterval = null;
-        document.querySelector("#zasdkrectimer").remove(); // no i18n
-        feedback.toggleWindowAnimation();
+        // the preview is read from what Quartz stored, so only once the recording has ended
+        Promise.resolve(quartz().endRecording()).catch(function (err) {
+            logger.Console.log('stopRecording: ' + err); // no i18n
+        }).then(feedback.recordingEnded);
+    },
+    recordingEnded: function () {
+        if (!recordingInProgress) {
+            return;
+        }
+        recordingInProgress = false;
+        feedback.isRecording = false;
+        clearInterval(feedback.timerInterval || undefined);
+        feedback.timerInterval = null;
+        var timer = document.getElementById("zasdkrectimer"); // no i18n
+        if (timer) {
+            timer.remove();
+        }
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        if (!modal) {
+            return; // the form was closed meanwhile
+        }
+        var send = sendWhenEnded;
+        sendWhenEnded = false;
+        feedback.showRecordingStatus(false);
+        feedback.showForm();
         modal.querySelector("#editRecordedVideo").style.display = "block"; // no i18n
         modal.querySelector("#zasdkreccheckcnt").style.display = "none"; // no i18n
         let videoElem = modal.querySelector('#previewVideoElemId'); // no i18n
-        quartz().endRecording();
-        quartz().setVideoContent(videoElem);
+        Promise.resolve(quartz().setVideoContent(videoElem)).catch(function (err) {
+            logger.Console.warn('AppticsFeedback: the recording could not be shown: ' + err); // no i18n
+        }).then(function () {
+            if (send && document.getElementById("zasdkFeedbackModal")) { // no i18n
+                feedback.submitRecording();
+            }
+        });
+    },
+    showForm: function () {
+        // shown outright, not toggled: a recording that ends mid-way through the scale-down would
+        // otherwise be toggled out of sight instead of back into it
+        var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        if (!modal) {
+            return;
+        }
+        const box = modal.querySelector('#zasdkFeedbackconatiner'); // no i18n
+        feedback.isHidden = false;
+        feedback.isScaled = false;
+        modal.style.display = 'block'; // no i18n
+        setTimeout(() => {
+            box.style.transform = 'scale(1)'; // no i18n
+            box.style.opacity = '1'; // no i18n
+            feedback.validateFeedbackField();
+        }, 10);
     },
     submitRecording: function () {
         var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
@@ -675,7 +802,15 @@ const feedback = {
     updateDisplay: function () {
         const minutes = Math.floor(feedback.remainingTime / 60);
         const seconds = feedback.remainingTime % 60;
-        feedback.timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; // no i18n
+        const shown = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; // no i18n
+        if (feedback.timerDisplay) {
+            feedback.timerDisplay.textContent = shown;
+        }
+        // and in the form, for when it is opened again mid-recording
+        var inForm = document.getElementById("zasdkRecStatusTime"); // no i18n
+        if (inForm) {
+            inForm.textContent = shown;
+        }
     },
     validateFeedbackField: function () {
         feedback.updateLeftCount();

package/dist/cjs/heatmap/send.d.ts

@@ -8,6 +8,8 @@ import type { Dict, ServerResult } from '../types.js';
  *
  * Gated on the server's own heatmap flag (getsdkconfig module 18), not on engagement: an app may
  * want events while declining to have every click's coordinates recorded.
+ *
+ * The scheduler reaches it through hooks.sendHeatmaps, which src/index.ts sets.
  */
 export declare function sendHeatmapData(forget?: boolean): Promise<void>;
 export declare function requestToSendHeatmaps(_payload: Dict, forget?: boolean): Promise<ServerResult>;

package/dist/cjs/heatmap/send.js

@@ -1,4 +1,4 @@
-/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.2 | (c) Zoho Corporation Private Limited | see LICENSE */
 'use strict';
 
 var state = require('../core/state.js');
@@ -9,7 +9,6 @@ var env = require('../core/env.js');
 var consent = require('../core/consent.js');
 var batch = require('../core/batch.js');
 var transport = require('../core/transport.js');
-var hooks = require('../core/hooks.js');
 
 /**
  * Sends queued heatmap records to heatmap/add.
@@ -20,6 +19,8 @@ var hooks = require('../core/hooks.js');
  *
  * Gated on the server's own heatmap flag (getsdkconfig module 18), not on engagement: an app may
  * want events while declining to have every click's coordinates recorded.
+ *
+ * The scheduler reaches it through hooks.sendHeatmaps, which src/index.ts sets.
  */
 function sendHeatmapData(forget) {
     if (env.is_apptics_disabled() || !consent.shouldTrackOrSendData() || !state._ZAP._heatmapTracking) {
@@ -74,9 +75,6 @@ function requestToSendHeatmaps(_payload, forget) {
     var label = 'requestToSendHeatmaps'; // no i18n
     return batch.sendBatch('heatmap', label, _payload, forget); // no i18n
 }
-// the scheduler flushes through this, so importing the heatmap entry is what puts heatmap
-// records on the flush timer at all
-hooks.hooks.sendHeatmaps = sendHeatmapData;
 
 exports.requestToSendHeatmaps = requestToSendHeatmaps;
 exports.sendHeatmapData = sendHeatmapData;

package/dist/cjs/heatmap/track.js

@@ -1,4 +1,4 @@
-/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.2 | (c) Zoho Corporation Private Limited | see LICENSE */
 'use strict';
 
 var constants = require('../core/constants.js');

package/dist/cjs/index.d.ts

@@ -1,4 +1,3 @@
-import './heatmap/send.js';
 import type { AppticsSdk } from './types.js';
 export type { AppticsSdk, AppticsConfig, ErrorLike, FeedbackType, Properties, TrackingStatus, UserInfo, UserValidationResult, } from './types.js';
 /** Android's Apptics: starting the SDK, and what applies to all of it. */
@@ -14,7 +13,7 @@ export type { ApiTrackingConfig } from './engagement/api-rules.js';
 export declare const AppticsError: AppticsSdk['AppticsError'];
 /** Android's AppticsUser: the signed-in user, and the builder for their properties. */
 export declare const AppticsUser: AppticsSdk['AppticsUser'];
-/** Heatmap capture: AppticsHeatmap.trackHeatmap() starts or stops recording clicks and scrolls. */
+/** Heatmap capture: AppticsHeatmap.setHeatmapTracking() starts or stops recording clicks and scrolls. */
 export declare const AppticsHeatmap: AppticsSdk['AppticsHeatmap'];
 /** Android's AppticsSettings: what the SDK may track for this visitor. */
 export declare const AppticsSettings: AppticsSdk['AppticsSettings'];