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

package/dist/cjs/feedback/quartz.js

@@ -0,0 +1,105 @@
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.2 | (c) Zoho Corporation Private Limited | see LICENSE */
+'use strict';
+
+var logger = require('../core/logger.js');
+
+/**
+ * Screen recording's script: Zoho Quartz, loaded by the SDK from the url getsdkconfig gives
+ * (`quartz.quartz_cdn_url`), so a page no longer adds it itself.
+ *
+ * It is a script run on the app's page, from a url the server sent. So only https urls on Zoho's
+ * own hosts are loaded: an answer that was wrong, or was tampered with on the way, cannot make
+ * the page run a script from anywhere else. Anything else is refused and said once.
+ */
+/** Zoho's script hosts: its CDNs and its data centres, local ones included. */
+const ZOHO_SCRIPT_HOST = /(^|\.)(zohocdn\.com|zohostatic\.com|localzohocdn\.com|localzoho\.com|zoho\.(com|eu|in|jp|sa|ae|com\.au|com\.cn)|zohocloud\.ca)$/; // no i18n
+/** quartz_domain as a recording host: zoho.com → https://quartz.zoho.com. '' when it isn't a domain. */
+function recordingDomain(domain) {
+    var name = (domain || '').trim().replace(/^\.+|\.+$/g, ''); // no i18n
+    if (/^https:\/\//i.test(name)) { // no i18n
+        return name.replace(/\/+$/, ''); // no i18n
+    }
+    return /^[a-z0-9-]+(\.[a-z0-9-]+)+$/i.test(name) ? 'https://quartz.' + name : ''; // no i18n
+}
+/** Where Quartz lives on Zoho's CDNs, the same on both: only the host differs. */
+const QUARTZ_SCRIPT_PATH = '/quartz/feedback/v2/quartz.js'; // no i18n
+/**
+ * The Quartz script for an app whose getsdkconfig answer carries no quartz_cdn_url, chosen by
+ * the serviceUrl: a localzoho server's apps load it from Zoho's local CDN, every other app from
+ * the public one.
+ */
+function defaultQuartzScriptUrl(serviceUrl) {
+    var host = ''; // no i18n
+    try {
+        host = new URL(serviceUrl).hostname;
+    }
+    catch (err) {
+        host = serviceUrl || ''; // no i18n
+    }
+    var cdn = host.indexOf('localzoho') !== -1 ? 'static.localzohocdn.com' : 'static.zohocdn.com'; // no i18n
+    return 'https://' + cdn + QUARTZ_SCRIPT_PATH; // no i18n
+}
+/** The script to load: quartz_cdn_url when getsdkconfig gave one, else the CDN the serviceUrl points to. */
+function quartzScriptSource(cdnUrl, serviceUrl) {
+    return cdnUrl && cdnUrl.trim() !== '' ? cdnUrl.trim() : defaultQuartzScriptUrl(serviceUrl); // no i18n
+}
+/** The url to load, or '' when it isn't an https url on a Zoho host. */
+function quartzScriptUrl(url) {
+    try {
+        var parsed = new URL(url);
+        return parsed.protocol === 'https:' && ZOHO_SCRIPT_HOST.test(parsed.hostname) ? parsed.href : ''; // no i18n
+    }
+    catch (err) {
+        return ''; // no i18n
+    }
+}
+function quartzOnPage() {
+    return typeof Quartz !== 'undefined' && !!Quartz; // no i18n
+}
+var loading = null;
+var refused = false;
+/**
+ * Makes Quartz available: resolves true once it is on the page, false when it can't be (no url,
+ * a url that isn't allowed, or a script that failed to load). Adds the script once; every caller
+ * waits on the same load, and a failed one may be tried again on the next open.
+ */
+function loadQuartz(url) {
+    if (quartzOnPage()) {
+        return Promise.resolve(true);
+    }
+    var src = quartzScriptUrl(url);
+    if (src === '') {
+        if (url && !refused) {
+            refused = true;
+            logger.warnAlways('AppticsFeedback: screen recording is off; its script url is not an https url on a Zoho host: ' + url); // no i18n
+        }
+        return Promise.resolve(false);
+    }
+    if (loading) {
+        return loading;
+    }
+    loading = new Promise(function (resolve) {
+        var script = document.createElement('script'); // no i18n
+        script.src = src;
+        script.async = true;
+        script.setAttribute('data-apptics', 'quartz'); // no i18n
+        script.onload = function () {
+            logger.Console.log('AppticsFeedback: Quartz loaded from ' + src); // no i18n
+            resolve(quartzOnPage());
+        };
+        script.onerror = function () {
+            logger.Console.warn('AppticsFeedback: the Quartz script did not load: ' + src); // no i18n
+            loading = null;
+            script.remove();
+            resolve(false);
+        };
+        (document.head || document.documentElement).appendChild(script);
+    });
+    return loading;
+}
+
+exports.defaultQuartzScriptUrl = defaultQuartzScriptUrl;
+exports.loadQuartz = loadQuartz;
+exports.quartzScriptSource = quartzScriptSource;
+exports.quartzScriptUrl = quartzScriptUrl;
+exports.recordingDomain = recordingDomain;

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

@@ -7,8 +7,8 @@ export interface FeedbackRequest {
     /** Stored addFeedbackLog() lines: true or unset sends them when there are any, false never does. */
     includeLog?: boolean;
     /**
-     * dyninfo.txt, holding addDiagnosticsInfo() entries and the device info dump.
-     * True always sends it, false never does, unset sends it when diagnostics are waiting.
+     * dyninfo.txt, holding addDiagnosticsInfo() entries: true or unset sends it when there are
+     * any, false never does.
      */
     includeDyninfo?: boolean;
     quartzid: string;
@@ -21,5 +21,8 @@ export interface FeedbackResult {
  * Sends feedback to the Apptics API.
  * Resolves with the outcome, or null when nothing was sent (disabled client or offline).
  */
+/** The form's limits on attachments: at most 5, at most 10 MB in all. */
+export declare const MAX_ATTACHMENTS = 5;
+export declare const MAX_ATTACHMENT_BYTES: number;
 export declare function sendFeedbackData(obj: FeedbackRequest): Promise<FeedbackResult | null>;
 export declare function requestToSendFeedback(_payload: FormData): Promise<ServerResult>;

package/dist/cjs/feedback/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.2 | (c) Zoho Corporation Private Limited | see LICENSE */
 'use strict';
 
 var state = require('../core/state.js');
@@ -10,18 +10,27 @@ var logs = require('./logs.js');
 
 const SUCCESS_MESSAGE = 'Feedback sent successfully'; // no i18n
 const FAILURE_MESSAGE = 'Something went wrong. Send feedback again'; // no i18n
-/**
- * Ids left out of dyninfo.txt.
- *
- * The file is read by a person looking at a report, and every one of these is a server-side id
- * that the server already has from the request's own params and meta. Repeating them buries the
- * four lines that actually describe the device - browser, OS, screen, timezone - in bookkeeping.
- */
-const DYNINFO_EXCLUDED_KEYS = ['deviceid', 'anonymousid', 'aaid', 'apid', 'mapid', 'devicetypeid', 'osversionid', 'platformid', 'appversionid', 'appreleaseversionid', 'modelid', 'timezoneid', 'frameworkid', 'projectid', 'portalid', 'donottrackenabled']; // no i18n
 /**
  * Sends feedback to the Apptics API.
  * Resolves with the outcome, or null when nothing was sent (disabled client or offline).
  */
+/** The form's limits on attachments: at most 5, at most 10 MB in all. */
+const MAX_ATTACHMENTS = 5;
+const MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
+/** Why these attachments cannot be sent, as the form says it, or '' when they can. */
+function attachmentProblem(files) {
+    if (!files || files.length === 0) {
+        return ''; // no i18n
+    }
+    if (files.length > MAX_ATTACHMENTS) {
+        return 'Maximum ' + MAX_ATTACHMENTS + ' attachments is allowed'; // no i18n
+    }
+    var total = 0;
+    for (var i = 0; i < files.length; i++) {
+        total += Number(files[i].size) || 0;
+    }
+    return total > MAX_ATTACHMENT_BYTES ? 'Maximum limit reached. The total file size cannot exceed 10MB.' : ''; // no i18n
+}
 function sendFeedbackData(obj) {
     if (env.is_apptics_disabled()) {
         return Promise.resolve(null);
@@ -32,6 +41,12 @@ function sendFeedbackData(obj) {
     }
     var _attachment = !utils.isEmpty(obj.attachment) ? obj.attachment : null;
     var _attachment_count = _attachment ? _attachment.length : 0;
+    // the form's own limits, for sendFeedback() too: past them the files were left out while
+    // attachmentcount still said they were there
+    var tooMany = attachmentProblem(_attachment);
+    if (tooMany !== '') { // no i18n
+        return Promise.reject(new Error('sendFeedback: ' + tooMany)); // no i18n
+    }
     var _logsFiles = obj && obj.logsFiles ? obj.logsFiles : null;
     var _logsFiles_count = _logsFiles && _logsFiles.length ? _logsFiles.length : 0;
     var time = utils.nowMs();
@@ -102,28 +117,13 @@ function readAttachments(fileList) {
     }
     return Promise.all(reads);
 }
-/** The device info dump that goes in dyninfo.txt, or null when it can't be serialised. */
-function deviceInfoText() {
-    try {
-        return JSON.stringify(utils.cloneMapExcludingKeys(state._ZAP._device_info, DYNINFO_EXCLUDED_KEYS) || {}, null, 2);
-    }
-    catch (e) {
-        logger.Console.error('Failed to prepare dyninfo file', e); // no i18n
-        return null;
-    }
-}
 /** Renders whatever addFeedbackLog() and addDiagnosticsInfo() left behind, honouring the flags. */
 function collectStoredFiles(obj) {
     var wantLog = obj.includeLog !== false;
-    var dyninfo = obj.includeDyninfo;
-    var wantDyninfo = dyninfo === true ? Promise.resolve(true)
-        : dyninfo === false ? Promise.resolve(false)
-            : logs.hasDiagnostics(); // unset: send it only because there is something to say
+    var wantDyninfo = obj.includeDyninfo !== false;
     return Promise.all([
         wantLog ? logs.toLogFile() : Promise.resolve(null),
-        wantDyninfo.then(function (wanted) {
-            return wanted ? logs.toDyninfoFile(deviceInfoText()) : null;
-        }),
+        wantDyninfo ? logs.toDyninfoFile() : Promise.resolve(null),
     ]).then(function ([log, dyn]) {
         return {
             logFile: log ? log.file : null,
@@ -143,7 +143,7 @@ function appendLogsAndDyninfo(sendformdata, _logsFiles, stored) {
     if (stored.logFile) {
         sendformdata.append('logfile', stored.logFile); // no i18n
     }
-    // dyninfo: addDiagnosticsInfo() entries plus the device info dump
+    // dyninfo: the addDiagnosticsInfo() entries
     if (stored.dyninfoFile) {
         sendformdata.append('dyninfo', stored.dyninfoFile); // no i18n
     }
@@ -154,7 +154,7 @@ function readyToSendFeedback(data, sentIds) {
         state._ZAP._sending = false;
         // only now, so entries added while this was in flight stay for the next submission
         if (sentIds.length > 0) {
-            logs.log_transactions_remove(sentIds);
+            logs.feedbacklog_transactions_remove(sentIds);
         }
         return { ok: true, message: SUCCESS_MESSAGE };
     }).catch(function (err) {
@@ -174,5 +174,7 @@ function requestToSendFeedback(_payload) {
     return transport.postToApptics('feedback', _payload, transport.apiHeaders(), label); // no i18n
 }
 
+exports.MAX_ATTACHMENTS = MAX_ATTACHMENTS;
+exports.MAX_ATTACHMENT_BYTES = MAX_ATTACHMENT_BYTES;
 exports.requestToSendFeedback = requestToSendFeedback;
 exports.sendFeedbackData = sendFeedbackData;

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

@@ -0,0 +1,10 @@
+/**
+ * The feedback form's stylesheet, which AppticsFeedback.feedbackFormOpen() adds to the page itself,
+ * so no app imports or links a stylesheet.
+ *
+ * Empty here: the build (scripts/feedback-css.mjs) replaces this module with the minified text of
+ * src/styles/apptics.css, for the npm and the CDN builds alike. Run from source, as the tests do,
+ * there is nothing to add.
+ */
+declare const css: string;
+export default css;

package/dist/cjs/feedback/styles.js

@@ -0,0 +1,8 @@
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.2 | (c) Zoho Corporation Private Limited | see LICENSE */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const css = ".zasdk-modal{color:var(--zasdk-text-color);margin:0;padding:0;font-family:inherit;line-height:normal}.zasdk-modal p{margin:0}.zasdk-modal ul{margin:0;padding:0;list-style:none}.zasdk-modal,.zasdk-timer-container{--zasdk-background-color:#fff;--zasdk-text-color:#333;--zasdk-border-color:#ddd;--zasdk-modal-background:#0006;--zasdk-close-color:#aaa;--zasdk-close-hover-color:#000;--zasdk-input-background:#fff;--zasdk-button-background:#f0f0f0;--zasdk-primary-color:#007bff;--zasdk-primary-text-color:#000;--zasdk-button-text-color:#fff;--zasdk-secondary-background:#ddd;--zasdk-icon-border-color:#ccc;--zasdk-dropdown-hover:#f0f0f0;--zasdk-selected-background:#f0f0f0;--zasdk-selected-border:#ddd;--zasdk-muted-text:#999;--zasdk-link-color:#0078d4;--zasdk-switch-off:#ccc;--zasdk-viewer-background:#f8f8f8;--zasdk-placeholder-color:#757575;--zasdk-shadow:#0000002e}.zasdk-modal[data-zasdk-theme=dark],.zasdk-timer-container[data-zasdk-theme=dark],.zasdk-modal.zasdk-dark-theme,.zasdk-timer-container.zasdk-dark-theme{--zasdk-background-color:#1a1a1a;--zasdk-text-color:#f0f0f0;--zasdk-border-color:#444;--zasdk-modal-background:#ffffff1a;--zasdk-close-color:#888;--zasdk-close-hover-color:#fff;--zasdk-input-background:#2a2a2a;--zasdk-button-background:#333;--zasdk-primary-color:#2f7bd8;--zasdk-primary-text-color:#fff;--zasdk-secondary-background:#333;--zasdk-icon-border-color:#555;--zasdk-dropdown-hover:#2a2a2a;--zasdk-selected-background:#2a2a2a;--zasdk-selected-border:#555;--zasdk-muted-text:#888;--zasdk-link-color:#5aa9ff;--zasdk-switch-off:#555;--zasdk-viewer-background:#222;--zasdk-placeholder-color:#9a9a9a;--zasdk-shadow:#0009}@media (prefers-color-scheme:dark){.zasdk-modal[data-zasdk-theme=auto],.zasdk-timer-container[data-zasdk-theme=auto]{--zasdk-background-color:#1a1a1a;--zasdk-text-color:#f0f0f0;--zasdk-border-color:#444;--zasdk-modal-background:#ffffff1a;--zasdk-close-color:#888;--zasdk-close-hover-color:#fff;--zasdk-input-background:#2a2a2a;--zasdk-button-background:#333;--zasdk-primary-color:#2f7bd8;--zasdk-primary-text-color:#fff;--zasdk-secondary-background:#333;--zasdk-icon-border-color:#555;--zasdk-dropdown-hover:#2a2a2a;--zasdk-selected-background:#2a2a2a;--zasdk-selected-border:#555;--zasdk-muted-text:#888;--zasdk-link-color:#5aa9ff;--zasdk-switch-off:#555;--zasdk-viewer-background:#222;--zasdk-placeholder-color:#9a9a9a;--zasdk-shadow:#0009}}.zasdk-modal-content *{box-sizing:border-box;font-size:14px}.zasdk-modal{z-index:214748364;pointer-events:none;width:100%;height:100%;color:var(--zasdk-primary-text-color);background:0 0;position:fixed;top:0;left:0;overflow:visible}.zasdk-modal-content{background-color:var(--zasdk-background-color);border:1px solid var(--zasdk-border-color);width:500px;max-width:calc(100% - 40px);max-height:calc(100% - 40px);box-shadow:0 8px 24px var(--zasdk-shadow);transform-origin:100% 100%;pointer-events:auto;-webkit-user-select:none;user-select:none;border-radius:8px;flex-direction:column;padding:10px 0 20px;transition:transform .3s,opacity .3s;display:flex;position:fixed;inset:auto 20px 20px auto}.zasdk-header{touch-action:none;cursor:move;flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:20px;padding:0 20px;display:flex}.zasdk-title{margin:0;font-size:24px;font-weight:700}.zasdk-close{color:var(--zasdk-close-color);cursor:pointer;font-size:28px;font-weight:700}.zasdk-close svg path{fill:var(--zasdk-primary-text-color)}.zasdk-close:hover,.zasdk-close:focus{color:var(--zasdk-close-hover-color);cursor:pointer;text-decoration:none}.zasdk-feedback-types{text-align:center;flex-shrink:0;justify-content:space-evenly;margin-bottom:20px;font-size:14px;display:flex}.zasdk-feedback-type{cursor:pointer;display:inline-block}.zasdk-iconcnt{background-color:var(--zasdk-background-color);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:5px;font-weight:700;display:inline-block}.zasdk-body{flex:auto;min-height:0;overflow-y:auto}.zasdk-form{padding:0 20px;position:relative}.zasdk-form select,.zasdk-form input,.zasdk-form textarea{border:1px solid var(--zasdk-border-color);background-color:var(--zasdk-input-background);width:100%;color:var(--zasdk-text-color);border-radius:4px;margin-bottom:15px;padding:8px;font-family:inherit;font-size:14px}.zasdk-form textarea::placeholder,.zasdk-form input::placeholder{color:var(--zasdk-placeholder-color);opacity:1}.zasdk-form textarea{resize:none;height:100px}.zasdkdesclbl{margin-bottom:5px;font-weight:700;display:block}.zasdkmadfeld{color:#f33558;padding-left:3px}.zaleftcharspan{float:right}.zaleftchartxt{margin-left:3px;font-weight:400}.zasdk_submit_btncnt{flex-shrink:0;justify-content:end;align-items:center;margin-top:20px;padding:0 20px;display:flex}.zasdkstsmsg{text-align:end;margin-right:20px;font-size:14px;display:none}.zasdkstserror{color:#f33155}.zasdkstssucs{color:#009c08}.zasdk-buttons{margin-top:20px}.zasdk-btn{cursor:pointer;text-align:center;border:none;border-radius:4px;padding:7px 20px;font-size:14px}.zasdk-send-btn{background-color:var(--zasdk-primary-color);color:var(--zasdk-button-text-color);min-width:81px;height:34px}.zasdk-attach-btn{background-color:var(--zasdk-button-background);vertical-align:middle;justify-content:center;align-items:center;height:40px;margin-bottom:0;margin-right:10px;padding:10px 15px 10px 5px;font-size:14px;font-weight:400;display:inline-flex}.zasdkfilesizeinf{vertical-align:middle;margin-top:10px;font-size:13px;display:inline-block}.zasdkattachinf{vertical-align:middle;margin-bottom:10px;font-size:13px;display:inline-block}input[type=file].zasdk-file-input{display:none}.zasdkfeedback__icon{border:1px solid var(--zasdk-icon-border-color);vertical-align:middle;text-align:center;box-sizing:border-box;border-radius:100%;width:32px;height:32px;transition:all .5s;display:inline-block}.zasdk-feedback-types svg{width:inherit;height:inherit;vertical-align:middle;display:inline-block}.zasdkfeedback__icon-report .zasdkfeedback__icon{fill:#ff4122}.zasdkfeedback__icon-report svg{width:28px;height:100%}.zasdk-feedback-type{text-align:center;border:1px solid #0000;width:90px;padding:10px 0;transition:all .5s}.zasdk-selected{border:1px solid var(--zasdk-selected-border);background-color:var(--zasdk-selected-background);border-radius:6px}.zasdk-selected .zasdkfeedback__icon-report .zasdkfeedback__icon{fill:#fff;background:#ff4122;border-color:#ff4122}.zasdk-feedback-type:hover .zasdkfeedback__icon-report .zasdkfeedback__icon{border-color:#ff4122}.zasdkfeedback__icon-reqest .zasdkfeedback__icon{fill:#a63cff}.zasdkfeedback__icon-reqest svg{width:24px;height:100%}.zasdk-feedback-type:hover .zasdkfeedback__icon-reqest .zasdkfeedback__icon{border-color:#a63cff}.zasdk-selected .zasdkfeedback__icon-reqest .zasdkfeedback__icon{fill:#fff;background:#a63cff;border-color:#a63cff}.zasdkfeedback__icon-help .zasdkfeedback__icon{fill:#fba400}.zasdkfeedback__icon-help svg{width:28px;height:100%}.zasdk-feedback-type:hover .zasdkfeedback__icon-help .zasdkfeedback__icon{border-color:#fba400}.zasdk-selected .zasdkfeedback__icon-help .zasdkfeedback__icon{fill:#fff;background:#fba400;border-color:#fba400}.zasdkfeedback__icon-appreciate .zasdkfeedback__icon{fill:#ff297a}.zasdkfeedback__icon-appreciate svg{width:25px;height:28px}.zasdk-feedback-type:hover .zasdkfeedback__icon-appreciate .zasdkfeedback__icon{border-color:#ff297a}.zasdk-selected .zasdkfeedback__icon-appreciate .zasdkfeedback__icon{fill:#fff;background:#ff297a;border-color:#ff297a}.zasdk-btncnt{margin-bottom:10px}.zasdk-dropdown{width:100%;margin-bottom:15px;position:relative}.zasdk-dropdown-header{border:1px solid var(--zasdk-border-color);cursor:pointer;background-color:var(--zasdk-input-background);color:var(--zasdk-text-color);border-radius:4px;padding:5px 10px}.zasdk-dropdown-options{background-color:var(--zasdk-background-color);border:1px solid var(--zasdk-border-color);z-index:1;border-radius:5px;display:none;position:absolute;top:35px;left:0;right:0}.zasdk-dropdown-option{cursor:pointer;padding:5px 10px}.zasdk-dropdown-option:hover{background-color:var(--zasdk-dropdown-hover)}.zasdkqz-container{width:100%;color:var(--zasdk-text-color);background:var(--zasdk-secondary-background);box-sizing:border-box;border-radius:8px;padding:15px;font-size:14px}.zasdkqz-checkbox-wrapper{align-items:flex-start;display:flex;position:relative}input[type=checkbox].zasdkqz-checkbox{opacity:0;width:auto;margin:0;position:absolute}.zasdkqz-checkbox+label{cursor:pointer;margin:0;padding-left:30px;font-weight:400;line-height:1.5;display:inline-block;position:relative}.zasdkqz-checkbox+label:before{content:\"\";border:1px solid var(--zasdk-primary-color);border-radius:4px;width:18px;height:18px;position:absolute;top:2px;left:0}.zasdkqz-checkbox:focus+label:before{border:2px solid var(--zasdk-primary-color)}.zasdkqz-content .zasdkqz-prop-content{margin-top:10px;padding-left:30px}.zasdkqz-checkbox:checked+label:before{background:var(--zasdk-primary-color)}.zasdkqz-checkbox:checked+label:after{content:\"\";border:0 solid #fff;border-width:0 0 1px 1px;width:10px;height:5px;transition:transform .3s;position:absolute;top:6px;left:10px;transform:rotate(-40deg)translate(-50%,-50%)scale(1)}.zasdkqz-content{max-height:0;transition:max-height .5s;overflow:hidden}.zasdkqz-content.zasdkqz-show{max-height:250px;display:block}.zasdkqz-button{background:var(--zasdk-primary-color);color:var(--zasdk-button-text-color);cursor:pointer;border:none;border-radius:4px;margin-top:16px;padding:10px 20px;text-decoration:none;transition:background-color .3s;display:inline-block}.zasdkqz-button:hover{background:var(--zasdk-primary-color)}.zasdkqz-info{margin-top:5px;font-size:14px}.zasdkqz-icon{vertical-align:middle;width:20px;height:20px;margin-left:4px;display:inline-block}.zasdk-modal .zasakfilelstcnt{margin-top:10px;list-style:none}.zasdk-modal .zasakfilelstcnt li{border:1px solid var(--zasdk-border-color);vertical-align:middle;cursor:default;background:var(--zasdk-secondary-background);border-radius:3px;margin:0 5px 5px 0;padding:2px 20px 2px 5px;font-size:1.1rem;display:inline-flex;position:relative}.zaskFdBckFlName{box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;max-width:120px;display:inline-block;overflow:hidden}.zasdkFdBckFlCls{background:var(--zasdk-secondary-background);cursor:pointer;border-radius:0 3px 3px 0;padding:0 3px;font-size:14px;line-height:22px;position:absolute;top:0;bottom:0;right:2px}.zasdkmaxerror{color:#f33155;font-size:14px}.zasdk-timer-container{background-color:var(--zasdk-secondary-background);z-index:11111;cursor:move;touch-action:none;border-radius:50px;align-items:center;gap:8px;padding:8px 10px;display:inline-flex;position:fixed;bottom:10px;right:10px;box-shadow:0 4px 15px #0000001a}.zasdk-timer-stopcricle{cursor:pointer;background-color:#f33155;border:none;border-radius:50%;width:12px;height:12px;padding:0;animation:1s infinite alternate blink}@keyframes blink{0%{opacity:1}to{opacity:.3}}.zasdk-timer-control{cursor:pointer;border:1px solid #f33155;border-radius:100%;padding:3px}.zasdk-timer-display{color:var(--zasdk-text-color);text-align:left;min-width:55px;font-size:14px;font-weight:500}.zasdk_videoPrev{justify-content:center;display:flex}.zasdk_videoPrev video{opacity:.4}.zasdk-recstatus{background:var(--zasdk-secondary-background);color:var(--zasdk-text-color);border-radius:8px;align-items:center;gap:8px;margin-bottom:15px;padding:10px 15px;display:flex}.zasdk-recstatus-text{flex:1;font-weight:500}.zasdk-recstatus .zasdk-timer-display{min-width:0}.zasdk-recstatus-stop{background:#f33155;margin-top:0;padding:6px 14px}.zasdk-recstatus-stop:hover{background:#f33155}.zasdk_recordedClipArea{border:1px solid var(--zasdk-border-color);border-radius:6px;display:none;position:relative}.zasdk_recordedClipArea .zasdk_rec_hdr{background-color:var(--zasdk-secondary-background);color:var(--zasdk-text-color);border-radius:3px 3px 0 0;padding:5px 10px}.zasdk_rec_hdr_icon{vertical-align:middle;display:inline-block;position:relative}.zasdk_rec_hdr i{vertical-align:middle;line-height:normal}.zasdk_rec_hdr svg{width:20px}.zasdk_playEdit{z-index:1;justify-content:space-between;align-items:stretch;width:180px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.zasdk_clipAreaButtonCnt,.zasdk_submit_btnsubcnt{position:relative}.zasdk_clipAreaButton{background:var(--zasdk-background-color);border:1px solid var(--zasdk-border-color);box-sizing:border-box;cursor:pointer;border-radius:6px;justify-content:center;align-items:center;width:50px;height:40px;display:flex;box-shadow:0 0 9px #0003}.zasdk_clipAreaButton:hover{background:var(--zasdk-dropdown-hover)}.zasdk_clipAreaButton svg{width:28px}.zasdk-send-btn.zasdkbtndisableclr{filter:grayscale();pointer-events:none;opacity:.5}.zasdk-send-btn.zasdkbtndisabled{cursor:not-allowed;position:relative}.zasdkbtndisabled:after{content:\"\";border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;margin:auto;animation:1s ease-in-out infinite zasdkbuttonspin;position:absolute;inset:0}@keyframes zasdkbuttonspin{to{transform:rotate(360deg)}}.zasdk-tooltip,.zasdk-tooltip-top{visibility:hidden;color:#fff;opacity:0;z-index:111111;background-color:#000;border-radius:4px;width:max-content;max-width:200px;margin-top:8px;padding:8px 12px;font-size:14px;transition:opacity .2s;position:absolute;top:100%;left:50%;transform:translate(-50%)}.zasdk-tooltip:after,.zasdk-tooltip-top:after{content:\"\";border:5px solid #0000;border-bottom-color:#000;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.zasdk-tooltip-container:hover .zasdk-tooltip,.zasdk-tooltip-container:hover .zasdk-tooltip-top{visibility:visible;opacity:1}.zasdk-tooltip-top{margin-top:0;margin-bottom:8px;top:auto;bottom:100%}.zasdk-tooltip-top:after{border-color:#000 #0000 #0000;top:100%}.zasdk-prop-info{max-width:320px}.zasdk-prop-info li{font-size:13px}.zasdkqz-content:has(.zasdk_rec_hdr:hover){overflow:visible}@media (width<=450px){.zasdk-modal-content{width:calc(100% - 10px);bottom:5px;left:5px;right:5px}}@media (height<=600px){.zasdk-modal-content{max-height:100%;top:auto}}@media (width<=370px){.zasdk-feedback-type{width:70px}.zasdk-iconcnt,.zasdkfeedback__icon{width:25px;height:25px}.zasdkfeedback__icon-report svg{width:20px;height:100%}.zasdkfeedback__icon-reqest svg{width:18px}.zasdkfeedback__icon-help svg{width:18px;height:22px}.zasdkfeedback__icon-appreciate svg{width:20px;height:20px}.zasdk-feedback-type *{word-break:break-word;font-size:12px}.zasdk-buttons{margin-top:0}}.zasdk-custom-select{width:100%;margin-bottom:15px;font-size:14px;position:relative}.zasdk-select-trigger{border:1px solid var(--zasdk-border-color);background:var(--zasdk-input-background);cursor:pointer;color:var(--zasdk-text-color);-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:space-between;align-items:center;padding:9px 12px;display:flex}.zasdk-select-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.zasdk-select-arrow{flex-shrink:0;margin-left:8px}.zasdk-select-panel{background:var(--zasdk-input-background);border:1px solid var(--zasdk-border-color);box-shadow:0 6px 20px var(--zasdk-shadow);z-index:99;border-radius:8px;position:absolute;top:calc(100% + 3px);left:0;right:0;overflow:hidden}.zasdk-select-list{max-height:180px;margin:0;padding:4px 0;list-style:none;overflow-y:auto}.zasdk-select-option{cursor:pointer;color:var(--zasdk-text-color);justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;display:flex}.zasdk-select-option:hover{background:var(--zasdk-dropdown-hover)}.zasdk-select-option.zasdk-option-selected{color:var(--zasdk-link-color);font-weight:500}.zasdk-select-empty{color:var(--zasdk-muted-text);text-align:center;padding:10px 16px;font-size:13px;font-style:italic}.zasdk-toggles-section{margin:5px 16px}.zasdk-toggle-row{border-top:1px solid var(--zasdk-border-color);justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.zasdk-toggle-info{flex-direction:row;flex:1;align-items:center;gap:8px;display:flex}.zasdk-toggle-label{color:var(--zasdk-text-color);font-size:14px;font-weight:600}.zasdk-view-link{color:var(--zasdk-link-color);cursor:pointer;white-space:nowrap;font-size:12px}.zasdk-view-link:hover{text-decoration:underline}.zasdk-toggle-separator{background:var(--zasdk-border-color);margin:0 16px}.zasdk-switch{flex-shrink:0;width:44px;height:24px;display:inline-block;position:relative}.zasdk-switch input{opacity:0;width:0;height:0}.zasdk-slider{cursor:pointer;background:var(--zasdk-switch-off);border-radius:24px;transition:all .3s;position:absolute;inset:0}.zasdk-slider:before{content:\"\";background:#fff;border-radius:50%;width:18px;height:18px;transition:all .3s;position:absolute;bottom:3px;left:3px}.zasdk-switch input:checked+.zasdk-slider{background:var(--zasdk-link-color)}.zasdk-switch input:checked+.zasdk-slider:before{transform:translate(20px)}.zasdk-data-viewer{background:var(--zasdk-background-color);z-index:100;border-radius:12px;flex-direction:column;position:absolute;inset:0;overflow:hidden}.zasdk-viewer-hdr{border-bottom:1px solid var(--zasdk-border-color);flex-shrink:0;align-items:center;gap:10px;padding:14px 16px;display:flex}.zasdk-viewer-back{cursor:pointer;flex-shrink:0;align-items:center;padding:2px;display:flex}.zasdk-viewer-back:hover svg path{stroke:var(--zasdk-link-color)}.zasdk-viewer-title{color:var(--zasdk-text-color);flex:1;font-size:16px;font-weight:600}.zasdk-viewer-content{color:var(--zasdk-text-color);white-space:pre-wrap;word-break:break-word;background:var(--zasdk-viewer-background);border-radius:6px;flex:1;margin:8px;padding:16px;font-family:monospace;font-size:12px;overflow-y:auto}.zasdk-modal-content :focus-visible{outline:2px solid var(--zasdk-primary-color);outline-offset:2px}@media (prefers-reduced-motion:reduce){.zasdk-modal *,.zasdk-timer-container *{transition:none!important;animation:none!important}}";
+
+exports.default = css;

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

@@ -1,2 +1,2 @@
-export declare const feedbackUIHtml = "<div id=\"zasdkFeedbackconatiner\" class=\"zasdk-modal-content\">\n                            <div class=\"zasdk-header\">\n                                <h2 class=\"zasdk-title\">Share feedback</h2>\n                                <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>\n                            </div>\n                            <div class=\"zasdk-feedback-types\" data-type=\"\">\n                                <div class=\"zasdk-feedback-type zasdk-selected\" 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=\"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=\"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\">character 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,25 +1,25 @@
-/*! @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.2 | (c) Zoho Corporation Private Limited | see LICENSE */
 'use strict';
 
 // 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>
@@ -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">
@@ -44,7 +45,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">
@@ -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

@@ -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,7 +43,12 @@ 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;
+    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;
@@ -46,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;