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

package/dist/esm/feedback/template.js

@@ -1,23 +1,23 @@
-/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta | (c) Zoho Corporation Private Limited | see LICENSE */
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
 // Feedback modal markup (moved from js/apptics.js).
-const feedbackUIHtml = `<div id="zasdkFeedbackconatiner" class="zasdk-modal-content">
+const feedbackUIHtml = `<div id="zasdkFeedbackconatiner" class="zasdk-modal-content" role="dialog" aria-modal="true" aria-labelledby="zasdkFeedbackTitle">
                             <div class="zasdk-header">
-                                <h2 class="zasdk-title">Share feedback</h2>
-                                <span id="appticsfeedbackclose" class="zasdk-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>
+                                <h2 id="zasdkFeedbackTitle" class="zasdk-title">Share feedback</h2>
+                                <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>
                             </div>
                             <div class="zasdk-feedback-types" data-type="">
-                                <div class="zasdk-feedback-type zasdk-selected" data-type="bug">
-                                    <div class="zasdk-iconcnt zasdkfeedback__icon-report">
-                                        <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>
-                                    </div>
-                                    <div>Bug</div>
-                                </div>
-                                <div class="zasdk-feedback-type" data-type="feedback">
+                                <div class="zasdk-feedback-type zasdk-selected" data-type="feedback">
                                     <div class="zasdk-iconcnt zasdkfeedback__icon-reqest">
                                         <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>
                                     </div>
                                     <div>Feedback</div>
                                 </div>
+                                <div class="zasdk-feedback-type" data-type="bug">
+                                    <div class="zasdk-iconcnt zasdkfeedback__icon-report">
+                                        <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>
+                                    </div>
+                                    <div>Bug</div>
+                                </div>
                                 <div class="zasdk-feedback-type" data-type="help">
                                     <div class="zasdk-iconcnt zasdkfeedback__icon-help">
                                         <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>
@@ -42,7 +42,7 @@ const feedbackUIHtml = `<div id="zasdkFeedbackconatiner" class="zasdk-modal-cont
                                         <ul id="zasdkEmailList" class="zasdk-select-list"></ul>
                                     </div>
                                 </div>
-                                <label class="zasdkdesclbl" for="zasdkDescription">Add details here<span class="zasdkmadfeld">*</span> <span class="zaleftcharspan"><span class="zaleftcharcnt">5000</span><span class="zaleftchartxt">character left</span></span></label>
+                                <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>
                                 <textarea id="zasdkDescription" name="description" placeholder="Please provide more details for us to help you better." reqname="name" maxlength="5000"></textarea>
                                 <div id="zasdkreccheckcnt" class="zasdkqz-container">
                                     <div class="zasdkqz-checkbox-wrapper">

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

@@ -1,8 +1,14 @@
-import type { FeedbackType } from '../types.js';
-export declare function sendFeedback(feedbackType?: FeedbackType, feedbackMessage?: string, attachments?: FileList | File[] | null, logsFiles?: FileList | File[] | null, includeDyninfo?: boolean, includeLog?: boolean): Promise<void>;
-export declare function feedbackOpen(type?: FeedbackType, message?: string, includeLog?: boolean, includeDyninfo?: boolean, attachments?: FileList | File[] | null, logFiles?: FileList | File[] | null, isAnonymous?: boolean): void;
-export declare function feedbackClose(): void;
-/** What feedbackOpen() may pre-set on the form. */
+import type { FeedbackOpenOptions as PublicFeedbackOpenOptions, FeedbackType, SendFeedbackOptions } from '../types.js';
+export declare function sendFeedback(options?: SendFeedbackOptions): Promise<void>;
+export declare function feedbackFormOpen(options?: PublicFeedbackOpenOptions): void;
+/**
+ * Sets the form's theme, for a page with its own light and dark modes: 'auto' follows the
+ * operating system, which is not what such a page shows. Restyles a form or recording timer that
+ * is open now, and every one opened after; Apptics.init()'s feedback_theme only sets the first.
+ */
+export declare function setFeedbackTheme(theme: 'light' | 'dark' | 'auto'): void;
+export declare function feedbackFormClose(): void;
+/** What the form is built with, from the options feedbackFormOpen() was given. */
 export interface FeedbackOpenOptions {
     type?: FeedbackType;
     message?: string;
@@ -29,7 +35,7 @@ export interface FeedbackUI {
     timerInterval: ReturnType<typeof setInterval> | null;
     uploadTotalSize: number;
     MaxFileSize: number;
-    /** What the last feedbackOpen() asked for; the form reads it as it is built. */
+    /** What the last feedbackFormOpen() asked for; the form reads it as it is built. */
     _opts: FeedbackOpenOptions;
     init(opts?: FeedbackOpenOptions): void;
     updateLeftCount(): void;
@@ -37,6 +43,8 @@ export interface FeedbackUI {
     handleErrorQuartzEvent(event: Event): void;
     bindQuartzEvent(event: Event): void;
     close(): void;
+    /** Escape closes the form; listened for from open to close. */
+    onEscape(e: KeyboardEvent): void;
     toggleWindowAnimation(): void;
     fileAttachment(): void;
     elementCreator<K extends keyof HTMLElementTagNameMap>(elType: K): HTMLElementTagNameMap[K];

package/dist/esm/feedback/ui.js

@@ -1,12 +1,15 @@
-/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta | (c) Zoho Corporation Private Limited | see LICENSE */
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
 import { AP_TRACKING_STATUS } from '../core/constants.js';
 import { _ZAP } from '../core/state.js';
-import { Console } from '../core/logger.js';
+import { Console, warnAlways } from '../core/logger.js';
 import { isEmpty, isEmptyObj } from '../core/utils.js';
 import { opt_in_status } from '../core/consent.js';
 import { timerHtml, feedbackUIHtml } from './template.js';
 import { sendFeedbackData } from './send.js';
-import { wireDrag, wireUserPicker, wireLogControls, logChoice, userChoice } from './controls.js';
+import { chooseUserForSend, userChoice, wireDrag, wireUserPicker, wireLogControls, logChoice } from './controls.js';
+import { injectStylesheet } from '../core/stylesheet.js';
+import { recordingDomain, loadQuartz, quartzScriptSource } from './quartz.js';
+import css from './styles.js';
 
 // Quartz is an optional page-level SDK. Without it every call is a no-op (fix #5).
 const QUARTZ_NOOP = {
@@ -46,25 +49,45 @@ function submitFeedback(dataobj) {
         return result;
     });
 }
-function sendFeedback(feedbackType, feedbackMessage, attachments, logsFiles, includeDyninfo, includeLog) {
+/** Whether a value is an options object: a plain object, not a type number or a message string. */
+function isOptions(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value); // no i18n
+}
+/** Said once: the old one-argument-after-another form of feedbackFormOpen. */
+var saidOpenForm = false;
+function sendFeedback(options) {
+    if (options !== undefined && !isOptions(options)) {
+        // the old form, sendFeedback(type, message, ...): sending it as it stands would send an
+        // empty report, so it is refused, and says what to pass instead
+        return Promise.reject(new Error('AppticsFeedback.sendFeedback: takes one options object, as sendFeedback({ type, message, attachments, logFiles, includeDiagnostics, includeLog, isAnonymous })')); // no i18n
+    }
+    const o = options || {};
     const dataobj = {
-        type: !isEmpty(feedbackType) ? feedbackType : 1,
-        message: feedbackMessage || '', // no i18n
-        attachment: attachments || null,
-        logsFiles: logsFiles || null,
+        type: !isEmpty(o.type) ? o.type : 1,
+        message: o.message || '', // no i18n
+        attachment: o.attachments || null,
+        logsFiles: o.logFiles || null,
         // both flags stay as given: unset lets send.ts decide from what is actually stored
-        includeDyninfo: includeDyninfo,
-        includeLog: includeLog,
+        includeDyninfo: o.includeDiagnostics,
+        includeLog: o.includeLog,
         quartzid: '' // no i18n
     };
+    // from the active user, or from nobody with isAnonymous; the form's own choice is put back after
+    var restoreUser = chooseUserForSend(o.isAnonymous === true);
     // an app awaiting this must be able to tell its user the feedback did not go: resolving on a
     // failure would have it say "thanks, sent" for a report the server never received
     return submitFeedback(dataobj).then(function (result) {
+        restoreUser();
+        return result;
+    }, function (err) {
+        restoreUser();
+        throw err;
+    }).then(function (result) {
         if (!result) {
-            throw new Error('apptics.sendFeedback: not sent, the browser is offline or Apptics is disabled for this client'); // no i18n
+            throw new Error('AppticsFeedback.sendFeedback: not sent, the browser is offline or Apptics is disabled for this client'); // no i18n
         }
         if (!result.ok) {
-            throw new Error('apptics.sendFeedback: not sent, ' + result.message); // no i18n
+            throw new Error('AppticsFeedback.sendFeedback: not sent, ' + result.message); // no i18n
         }
     });
 }
@@ -109,23 +132,54 @@ function newTransfer() {
         return null;
     }
 }
-function feedbackOpen(type, message, includeLog, includeDyninfo, attachments, logFiles, isAnonymous) {
+function feedbackFormOpen(options) {
+    if (options !== undefined && !isOptions(options) && !saidOpenForm) {
+        // the old form, feedbackFormOpen(type, message, ...): the form still opens, with its defaults
+        saidOpenForm = true;
+        warnAlways('AppticsFeedback.feedbackFormOpen: takes one options object, as feedbackFormOpen({ type, message, includeLog, includeDiagnostics, attachments, logFiles, isAnonymous }); opening it with its defaults'); // no i18n
+    }
+    const o = isOptions(options) ? options : {};
     const opts = {
-        includeLog: includeLog === true,
-        includeDyninfo: includeDyninfo === true,
-        isAnonymous: isAnonymous === true,
+        includeLog: o.includeLog === true,
+        includeDyninfo: o.includeDiagnostics === true,
+        isAnonymous: o.isAnonymous === true,
     };
-    if (typeof type === 'number')
-        opts.type = type; // no i18n
-    if (typeof message === 'string' && message.length > 0)
-        opts.message = message; // no i18n
-    if (attachments && attachments.length > 0)
-        opts.attachments = attachments;
-    if (logFiles && logFiles.length > 0)
-        opts.logFiles = logFiles;
+    if (typeof o.type === 'number')
+        opts.type = o.type; // no i18n
+    if (typeof o.message === 'string' && o.message.length > 0)
+        opts.message = o.message; // no i18n
+    if (o.attachments && o.attachments.length > 0)
+        opts.attachments = o.attachments;
+    if (o.logFiles && o.logFiles.length > 0)
+        opts.logFiles = o.logFiles;
+    // the form brings its own styles, so an app imports or links no css
+    injectStylesheet(css);
     feedback.init(opts);
 }
-function feedbackClose() {
+/** The themes the form has: 'auto' follows the visitor's system setting. */
+const FEEDBACK_THEMES = ['light', 'dark', 'auto']; // no i18n
+/**
+ * Sets the form's theme, for a page with its own light and dark modes: 'auto' follows the
+ * operating system, which is not what such a page shows. Restyles a form or recording timer that
+ * is open now, and every one opened after; Apptics.init()'s feedback_theme only sets the first.
+ */
+function setFeedbackTheme(theme) {
+    if (FEEDBACK_THEMES.indexOf(theme) === -1) {
+        Console.warn('AppticsFeedback.setFeedbackTheme: takes \'light\', \'dark\' or \'auto\', not ' + JSON.stringify(theme)); // no i18n
+        return;
+    }
+    _ZAP._config.feedback_theme = theme;
+    if (typeof document === 'undefined') { // no i18n
+        return;
+    }
+    ['zasdkFeedbackModal', 'zasdkrectimer'].forEach(function (id) {
+        var open = document.getElementById(id);
+        if (open) {
+            open.setAttribute('data-zasdk-theme', theme); // no i18n
+        }
+    });
+}
+function feedbackFormClose() {
     feedback.close();
 }
 const feedback = {
@@ -156,25 +210,15 @@ const feedback = {
         feedback.uploadFileAry = [];
         tempContainer.id = 'zasdkFeedbackModal'; // no i18n
         tempContainer.className = 'zasdk-modal'; // no i18n
+        tempContainer.setAttribute('data-zasdk-theme', _ZAP._config.feedback_theme); // no i18n
         tempContainer.innerHTML = feedback.feedbackUIHtml;
         document.body.appendChild(tempContainer);
         var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
-        var defaultoption = _ZAP._defaultoptions;
-        var qz_ws_key = defaultoption.quartz_workspace_key;
-        var qz_dp_key = defaultoption.quartz_department_key;
-        var quartz_DC = {
-            "Local": "https://quartz.localzoho.com", // no i18n
-            "US": "https://quartz.zoho.com", // no i18n
-            "EU": "https://quartz.zoho.eu", // no i18n
-            "IN": "https://quartz.zoho.in", // no i18n
-            "AU": "https://quartz.zoho.com.au", // no i18n
-            "CN": "https://quartz.zoho.com.cn", // no i18n
-            "CA": "https://quartz.zohocloud.ca", // no i18n
-            "JP": "https://quartz.zoho.jp", // no i18n
-            "SA": "https://quartz.zoho.sa", // no i18n
-            "AE": "https://quartz.zoho.ae" // no i18n
-        };
-        var qz_dc_key = (!isEmpty(defaultoption.DC) && defaultoption.DC !== '-') ? (quartz_DC[defaultoption.DC] || '') : ''; // no i18n
+        // screen recording as the console set it up for this app (getsdkconfig's quartz block)
+        var qz = _ZAP._quartz;
+        var qz_ws_key = qz.workspace;
+        var qz_dp_key = qz.department;
+        var qz_dc_key = recordingDomain(qz.domain);
         var closeBtn = modal.querySelector("#appticsfeedbackclose"); // no i18n
         var feedbackTypes = modal.querySelectorAll(".zasdk-feedback-type"); // no i18n
         feedback.fileInput = modal.querySelector("#zasdkFileInput"); // no i18n
@@ -197,12 +241,21 @@ const feedback = {
         document.addEventListener('quartz-feedback-state', feedback.bindQuartzEvent); // no i18n
         document.removeEventListener('quartz-feedback-error', feedback.handleErrorQuartzEvent); // no i18n
         document.addEventListener('quartz-feedback-error', feedback.handleErrorQuartzEvent); // no i18n
-        // the consent checkbox and its label only when a recording can actually be made: the Quartz
-        // script on the page, a DC it knows, and both keys. "-" for any of them turns it off; DC "-"
-        // has already become '' above. A checkbox that leads only to "unavailable" is not offered
-        var recordingAvailable = hasQuartz() && !isEmpty(qz_dc_key)
-            && !isEmpty(qz_ws_key) && qz_ws_key !== "-" && !isEmpty(qz_dp_key) && qz_dp_key !== "-"; // no i18n
-        modal.querySelector("#zasdkreccheckcnt").style.display = recordingAvailable ? "block" : "none"; // no i18n
+        // the consent checkbox and its label only when a recording can actually be made: recording
+        // on for the app, its workspace, department and domain, and Quartz on the page. A checkbox
+        // that leads only to "unavailable" is not offered. Quartz is loaded here, the first time
+        // the form needs it, and the checkbox shows once it has arrived
+        var recordingConfigured = qz.enabled && !isEmpty(qz_dc_key) && !isEmpty(qz_ws_key) && !isEmpty(qz_dp_key);
+        var recordingBlock = modal.querySelector("#zasdkreccheckcnt"); // no i18n
+        recordingBlock.style.display = recordingConfigured && hasQuartz() ? "block" : "none"; // no i18n
+        if (recordingConfigured && !hasQuartz()) {
+            // quartz_cdn_url, or Zoho's CDN for this serviceUrl when the answer carries none
+            loadQuartz(quartzScriptSource(qz.cdnUrl, String(_ZAP._defaultoptions.serviceUrl || ''))).then(function (loaded) {
+                if (loaded && recordingBlock.isConnected) {
+                    recordingBlock.style.display = "block"; // no i18n
+                }
+            });
+        }
         feedbackbox.addEventListener('transitionend', function (event) {
             if (event.propertyName === 'transform' && feedback.isScaled) { // no i18n
                 feedback.toggleWindowAnimation();
@@ -231,6 +284,14 @@ const feedback = {
         closeBtn.onclick = function () {
             feedback.close();
         };
+        // 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();
+            }
+        };
+        document.addEventListener('keydown', feedback.onEscape); // no i18n
         preivewButton.addEventListener('click', function () {
             quartz().previewVideo();
         });
@@ -281,6 +342,11 @@ const feedback = {
             }
         });
         descriptionField.addEventListener('input', feedback.validateFeedbackField); // no i18n
+        // keyboard and screen-reader users land in the form, not behind it
+        try {
+            descriptionField.focus({ preventScroll: true });
+        }
+        catch (err) { /* focus is a courtesy */ }
         feedbackTypes.forEach(function (type) {
             type.addEventListener("click", function () {
                 feedbackTypes.forEach(function (t) {
@@ -289,7 +355,7 @@ const feedback = {
                 this.classList.add("zasdk-selected"); // no i18n
             });
         });
-        // what feedbackOpen() was given: select that type, fill the description
+        // what feedbackFormOpen() was given: select that type, fill the description
         if (typeof feedback._opts.type === 'number') { // no i18n
             var wanted = Object.keys(feedback.typeObj).filter(function (name) {
                 return feedback.typeObj[name] === feedback._opts.type;
@@ -349,6 +415,10 @@ const feedback = {
             let counterElem = elem.parentElement ? elem.parentElement.querySelector(".zaleftcharcnt") : null; // no i18n
             if (counterElem) {
                 counterElem.textContent = String(maxLength - val.length); // Update remaining count
+                var unit = counterElem.parentElement ? counterElem.parentElement.querySelector(".zaleftchartxt") : null; // no i18n
+                if (unit) {
+                    unit.textContent = maxLength - val.length === 1 ? 'character left' : 'characters left'; // no i18n
+                }
             }
         });
     },
@@ -392,6 +462,7 @@ const feedback = {
             const tempDiv = document.createElement("div"); // no i18n
             tempDiv.innerHTML = feedback.timerHtml;
             const node = tempDiv.firstElementChild;
+            node.setAttribute('data-zasdk-theme', _ZAP._config.feedback_theme); // no i18n
             document.body.appendChild(node);
             var feedbacktimer = document.getElementById("zasdkrectimer"); // no i18n
             feedback.timerDisplay = feedbacktimer.querySelector('#zasdkTimerDisplay'); // no i18n
@@ -404,8 +475,14 @@ const feedback = {
             feedback.toggleWindowAnimation();
         }
     },
+    onEscape: function (e) {
+        if (e.key === 'Escape') { // no i18n
+            feedback.close();
+        }
+    },
     close: function () {
         var modal = document.getElementById("zasdkFeedbackModal"); // no i18n
+        document.removeEventListener('keydown', feedback.onEscape); // no i18n
         document.removeEventListener('quartz-feedback-state', feedback.bindQuartzEvent); // no i18n
         quartz().clearFeedback();
         if (!isEmpty(modal)) {
@@ -623,4 +700,4 @@ const feedback = {
     }
 };
 
-export { feedback, feedbackClose, feedbackOpen, sendFeedback };
+export { feedback, feedbackFormClose, feedbackFormOpen, sendFeedback, setFeedbackTheme };

package/dist/esm/heatmap/send.js

@@ -1,4 +1,4 @@
-/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta | (c) Zoho Corporation Private Limited | see LICENSE */
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
 import { _ZAP } from '../core/state.js';
 import { Console, warnAlways } from '../core/logger.js';
 import { cloneObject } from '../core/utils.js';

package/dist/esm/heatmap/track.d.ts

@@ -1,4 +1,4 @@
 /** Turns capture on or off. Listeners are passive, so they never delay a click or a scroll. */
-export declare function enableHeatmap(status?: boolean): void;
+export declare function trackHeatmap(status?: boolean): void;
 /** Forgets what this visit recorded. reset() calls it; the cap starts again from zero. */
 export declare function resetHeatmapSession(): void;

package/dist/esm/heatmap/track.js

@@ -1,4 +1,4 @@
-/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta | (c) Zoho Corporation Private Limited | see LICENSE */
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (c) Zoho Corporation Private Limited | see LICENSE */
 import { AP_LOG_MODULE, AP_CONFIG, AP_TRACKING_STATUS } from '../core/constants.js';
 import { getConfig, _ZAP } from '../core/state.js';
 import { Console, logFailure } from '../core/logger.js';
@@ -22,6 +22,12 @@ import { noteDebugActivity } from '../core/debug.js';
  */
 /** How long the page must be still before a scroll burst counts as one finished gesture. */
 const SCROLL_IDLE_MS = 150;
+/**
+ * How much of the viewport, each way, an element must cover for its scrolling to be the page's.
+ * An app whose layout scrolls a content pane instead of the window (most dashboards do) still
+ * gets a scroll map; a dropdown list or a small table scrolling on its own is not the page moving.
+ */
+const PAGE_SCROLLER_SHARE = 0.5;
 /** Clicks closer than this in time and space count as one angry repetition. */
 const RAGE_WINDOW_MS = 1000;
 const RAGE_RADIUS_PX = 30;
@@ -40,6 +46,10 @@ var scrollStart = 0;
 var scrollStartX = 0;
 var scrollStartY = 0;
 var scrollTimer = null;
+/** What the gesture in progress scrolls: null for the window, else the page's content pane. */
+var scrolling = null;
+/** Where each content pane was after its last gesture, as lastX / lastY are for the window. */
+var paneAt = new WeakMap();
 /**
  * Where the page was before the current gesture began.
  *
@@ -122,7 +132,7 @@ function labelFor(node) {
     if (!node) {
         return ''; // no i18n
     }
-    var attributes = ['data-ap-label', 'apeventaction', 'aria-label', 'name', 'id', 'title']; // no i18n
+    var attributes = ['data-ap-label', 'apeventaction', 'data-apeventaction', 'aria-label', 'name', 'id', 'title']; // no i18n
     for (var i = 0; i < attributes.length; i++) {
         var value = node.getAttribute ? node.getAttribute(attributes[i]) : null;
         if (!isEmpty(value)) {
@@ -278,14 +288,57 @@ function watchForDeadClick(record, target) {
         }
     }, DEAD_CLICK_MS);
 }
-function onScroll() {
+/**
+ * What a scroll event moved, as a gesture counts it: null for the window (the event's target is
+ * the document), the element when it is big enough to be the page's own scrolling, and undefined
+ * for anything smaller, which is not recorded.
+ */
+function scrollerOf(target) {
+    var doc = document;
+    // the window and the document are not elements: either is the page itself scrolling
+    if (!target || target.nodeType !== 1 || target === doc.documentElement || target === doc.body) {
+        return null;
+    }
+    var el = target;
+    var big = el.clientHeight >= (window.innerHeight || 0) * PAGE_SCROLLER_SHARE
+        && el.clientWidth >= viewportWidth() * PAGE_SCROLLER_SHARE;
+    return big ? el : undefined;
+}
+/** Where a scroller is now. */
+function positionOf(scroller) {
+    return scroller === null
+        ? { x: Math.round(window.scrollX || window.pageXOffset || 0), y: Math.round(window.scrollY || window.pageYOffset || 0) }
+        : { x: Math.round(scroller.scrollLeft || 0), y: Math.round(scroller.scrollTop || 0) };
+}
+/**
+ * Where a scroller was before this gesture: what the last one left. A content pane seen for the
+ * first time is taken to have been at its top, which is where a pane starts.
+ */
+function startOf(scroller) {
+    if (scroller === null) {
+        return { x: lastX, y: lastY };
+    }
+    return paneAt.get(scroller) || { x: 0, y: 0 };
+}
+function onScroll(event) {
     if (!canTrackHeatmap('heatmap') || !underCap()) { // no i18n
         return;
     }
+    var scroller = scrollerOf(event ? event.target : null);
+    if (scroller === undefined) {
+        return;
+    }
+    if (scrollTimer !== null && scroller !== scrolling) {
+        // another scroller started moving: the gesture on the first one is over
+        clearTimeout(scrollTimer);
+        endScrollGesture();
+    }
     if (scrollTimer === null) {
+        scrolling = scroller;
+        var start = startOf(scroller);
         scrollStart = nowMs();
-        scrollStartX = lastX;
-        scrollStartY = lastY;
+        scrollStartX = start.x;
+        scrollStartY = start.y;
     }
     else {
         clearTimeout(scrollTimer);
@@ -295,13 +348,21 @@ function onScroll() {
 /** One record for the whole burst, once the page has been still for SCROLL_IDLE_MS. */
 function endScrollGesture() {
     scrollTimer = null;
+    var scroller = scrolling;
+    scrolling = null;
     try {
-        var endX = Math.round(window.scrollX || 0);
-        var endY = Math.round(window.scrollY || 0);
+        var end = positionOf(scroller);
+        var endX = end.x;
+        var endY = end.y;
         var dx = endX - scrollStartX;
         var dy = endY - scrollStartY;
-        lastX = endX;
-        lastY = endY;
+        if (scroller === null) {
+            lastX = endX;
+            lastY = endY;
+        }
+        else {
+            paneAt.set(scroller, end);
+        }
         if (dx === 0 && dy === 0) {
             return;
         }
@@ -310,8 +371,14 @@ function endScrollGesture() {
         var direction = Math.abs(dy) >= Math.abs(dx)
             ? (dy > 0 ? 'down-scroll' : 'up-scroll') // no i18n
             : (dx > 0 ? 'right-scroll' : 'left-scroll'); // no i18n
-        var height = contentHeight() || 1;
-        store(Object.assign(common(), {
+        // the depth is of what scrolled: the document, or the content pane and its own content
+        var height = (scroller === null ? contentHeight() : scroller.scrollHeight) || 1;
+        var visible = scroller === null ? (window.innerHeight || 0) : scroller.clientHeight;
+        store(Object.assign(common(), scroller === null ? {} : {
+            content_height: scroller.scrollHeight,
+            scroll_offset_x: endX,
+            scroll_offset_y: endY,
+        }, {
             // the server accepts only event|default|buttonclick here; what kind of movement it
             // was belongs in gesture_type. input_type is left off rather than invented: a wheel
             // carries no pointer type, and the intended vocabulary has no value for "unknown"
@@ -324,7 +391,7 @@ function endScrollGesture() {
             coordinate_y: endY,
             normalized_x: 0,
             // how far down the page the gesture left them, which is what a scroll map reads
-            normalized_y: fraction(endY + (window.innerHeight || 0), height),
+            normalized_y: fraction(endY + visible, height),
             velocity: Math.round((distance / duration) * 1000),
             is_clickable: 0,
             is_rage_click: 0,
@@ -336,7 +403,7 @@ function endScrollGesture() {
     }
 }
 /** Turns capture on or off. Listeners are passive, so they never delay a click or a scroll. */
-function enableHeatmap(status) {
+function trackHeatmap(status) {
     var wanted = typeof status === 'boolean' ? status : true; // no i18n
     if (wanted === installed) {
         return;
@@ -353,10 +420,13 @@ function enableHeatmap(status) {
     }
     window.removeEventListener('pointerdown', onPointerDown, true); // no i18n
     window.removeEventListener('scroll', onScroll, true); // no i18n
+    // a gesture still settling when capture stops (a single-page app leaving a heatmap page) is
+    // recorded as it stands, not dropped: it was the visitor's last scroll on that page
     if (scrollTimer !== null) {
         clearTimeout(scrollTimer);
-        scrollTimer = null;
+        endScrollGesture();
     }
+    scrolling = null;
     installed = false;
     Console.log('apptics.heatmap: capture stopped'); // no i18n
 }
@@ -366,9 +436,10 @@ function resetHeatmapSession() {
     recentClicks = [];
     lastX = 0;
     lastY = 0;
+    paneAt = new WeakMap();
 }
 // init() and reset() drive capture through these, so neither has to import this module
-hooks.enableHeatmap = enableHeatmap;
+hooks.trackHeatmap = trackHeatmap;
 hooks.resetHeatmap = resetHeatmapSession;
 
-export { enableHeatmap, resetHeatmapSession };
+export { resetHeatmapSession, trackHeatmap };