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

package/dist/cjs/feedback/template.js

@@ -0,0 +1,162 @@
+/*! @zoho_apptics/apptics-js-sdk v2.0.0-beta.1 | (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" role="dialog" aria-modal="true" aria-labelledby="zasdkFeedbackTitle">
+                            <div class="zasdk-header">
+                                <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="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>
+                                    </div>
+                                    <div>Help</div>
+                                </div>
+                                <div class="zasdk-feedback-type" data-type="report">
+                                    <div class="zasdk-iconcnt zasdkfeedback__icon-appreciate">
+                                        <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>
+                                    </div>
+                                    <div>Report</div>
+                                </div>
+                            </div>
+                            <div id="zasdkFeedbackForm" class="zasdk-form">
+                                <label class="zasdkdesclbl">User<span class="zasdkmadfeld">*</span></label>
+                                <div id="zasdkEmailDropdown" class="zasdk-custom-select">
+                                    <div id="zasdkEmailTrigger" class="zasdk-select-trigger">
+                                        <span id="zasdkEmailLabel" class="zasdk-select-label">Anonymous</span>
+                                        <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>
+                                    </div>
+                                    <div id="zasdkEmailPanel" class="zasdk-select-panel" style="display:none">
+                                        <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">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">
+                                        <input type="checkbox" id="zasdkqz-consent" class="zasdkqz-checkbox">
+                                        <label for="zasdkqz-consent">By agreeing to record screen, I allow the collection of the required information for further analysis.</label>
+                                    </div>
+                                    <div id="zasdkqz-content" class="zasdkqz-content">
+                                        <div class="zasdkqz-prop-content">Data collected while screen recording.
+                                            <div class="zasdk_rec_hdr_icon zasdk-tooltip-container zasdk_rec_hdr">
+                                                <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>
+                                                <div class="zasdk-tooltip-top zasdk-prop-info">
+                                                    <ul>
+                                                        <li>- A recording of the window or region specified.</li>
+                                                        <li>- Audio captured during recording. (You can mute or re-record)</li>
+                                                        <li>- IP address.</li>
+                                                        <li>- Browser console logs generated while recording.</li>
+                                                        <li>- Device details (screen resolution, OS, and browser version).</li>
+                                                        <li>- Client-side performance metrics (DNS lookup time, TCP connection time, etc.).</li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div id="zasdkqz_rec_button" class="zasdkqz-button">Start screen recording</div>
+                                    </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">
+                                            <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>
+                                            <div class="zasdk-tooltip">This recording will be sent along with your feedback for further analysis.</div>
+                                        </div>
+                                    </div>
+                                    <div class="zasdk_playEdit">
+                                        <div class="zasdk_clipAreaButtonCnt zasdk-tooltip-container">
+                                            <div id="preivewPlayButton" class="zasdk_clipAreaButton" title="Preview">
+                                                <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>
+                                            </div>
+                                            <div class="zasdk-tooltip">Preview</div>
+                                        </div>
+                                        <div class="zasdk_clipAreaButtonCnt zasdk-tooltip-container">
+                                            <div id="videoEditButton" class="zasdk_clipAreaButton">
+                                                <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>
+                                            </div>
+                                            <div class="zasdk-tooltip">Edit</div>
+                                        </div>
+                                        <div class="zasdk_clipAreaButtonCnt zasdk-tooltip-container">
+                                            <div id="videoDelButton" class="zasdk_clipAreaButton">
+                                                <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>
+                                            </div>
+                                            <div class="zasdk-tooltip">Delete</div>
+                                        </div>
+                                    </div>
+                                    <div class="zasdk_videoPrev">
+                                        <video id="previewVideoElemId" width="320" height="240" src=""></video>
+                                    </div>
+                                </div>
+
+                                <div class="zasdk-buttons">
+                                    <div class="zasdk-btncnt">
+                                        <div id="zasdkattachinfo" class="zasdkattachinf">Maximum 5 attachments with a total file size of 10MB is allowed</div>
+                                        <input type="file" id="zasdkFileInput" class="zasdk-file-input" multiple accept=".png, .jpg, .txt">
+                                        <label id="zasdkAttachBtn" class="zasdk-btn zasdk-attach-btn" for="zasdkFileInput">
+                                            <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>
+                                            <span>Attachments</span>
+                                        </label>
+                                        <div id="zasdkfilesizeinfo" class="zasdkfilesizeinf"></div>
+                                        <ul id="zasakfileList" class="zasakfilelstcnt"></ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="zasdk-toggles-section">
+                                <div class="zasdk-toggle-row">
+                                    <div class="zasdk-toggle-info">
+                                        <span class="zasdk-toggle-label">Include System Logs</span>
+                                        <span class="zasdk-view-link" id="zasdkViewLogsBtn">View</span>
+                                    </div>
+                                    <label class="zasdk-switch">
+                                        <input type="checkbox" id="zasdkIncludeLogToggle">
+                                        <span class="zasdk-slider"></span>
+                                    </label>
+                                </div>
+                                <div class="zasdk-toggle-separator"></div>
+                                <div class="zasdk-toggle-row">
+                                    <div class="zasdk-toggle-info">
+                                        <span class="zasdk-toggle-label">Include Diagnostic Information</span>
+                                        <span class="zasdk-view-link" id="zasdkViewDiagBtn">View</span>
+                                    </div>
+                                    <label class="zasdk-switch">
+                                        <input type="checkbox" id="zasdkIncludeDiagToggle">
+                                        <span class="zasdk-slider"></span>
+                                    </label>
+                                </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">
+                                    <input type="button" id="zasdk_submit_btn" class="zasdk-btn zasdk-send-btn zasdkbtndisableclr" value="Send">
+                                </div>
+                            </div>
+                            <div id="zasdkDataViewer" class="zasdk-data-viewer" style="display:none">
+                                <div class="zasdk-viewer-hdr">
+                                    <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>
+                                    <span id="zasdkViewerTitle" class="zasdk-viewer-title"></span>
+                                </div>
+                                <pre id="zasdkViewerContent" class="zasdk-viewer-content"></pre>
+                            </div>
+                        </div>`; // no i18n
+const timerHtml = `<div id="zasdkrectimer" class="zasdk-timer-container zasdk-tooltip-container">
+                    <div class="zasdk-timer-control" id="zasdkRecordButton"><div class="zasdk-timer-stopcricle"></div></div>
+                    <span class="zasdk-timer-display" id="zasdkTimerDisplay">05:00</span>
+                    <div class="zasdk-tooltip-top">Stop Recording</div>
+                </div>`; // no i18n
+
+exports.feedbackUIHtml = feedbackUIHtml;
+exports.timerHtml = timerHtml;

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

@@ -0,0 +1,63 @@
+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;
+    includeLog?: boolean;
+    includeDyninfo?: boolean;
+    isAnonymous?: boolean;
+    attachments?: FileList | File[] | null;
+    logFiles?: FileList | File[] | null;
+}
+export interface FeedbackUI {
+    feedbackUIHtml: string;
+    timerHtml: string;
+    typeObj: Record<string, FeedbackType>;
+    uploadFileAry: File[];
+    fileInput: HTMLInputElement | null;
+    selectedFiles: DataTransfer | null;
+    isScaled: boolean;
+    isHidden: boolean;
+    timerDisplay: HTMLElement | null;
+    recordButton: HTMLElement | null;
+    TOTAL_TIME: number;
+    remainingTime: number;
+    isRecording: boolean;
+    timerInterval: ReturnType<typeof setInterval> | null;
+    uploadTotalSize: number;
+    MaxFileSize: number;
+    /** What the last feedbackFormOpen() asked for; the form reads it as it is built. */
+    _opts: FeedbackOpenOptions;
+    init(opts?: FeedbackOpenOptions): void;
+    updateLeftCount(): void;
+    handleStatusmsg(isSuccess?: boolean, stsmsg?: string): void;
+    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];
+    fileLimitExceeded(limitReached: boolean, filesLengthReached?: boolean): void;
+    removeFileFromList(elem: HTMLElement): void;
+    formatFileSize(bytes: number): string;
+    toggleRecording(): void;
+    startRecording(): void;
+    stopRecording(): void;
+    submitRecording(): void;
+    updateTimer(): void;
+    updateDisplay(): void;
+    validateFeedbackField(): void;
+    getVisibleErrorCount(elements: NodeListOf<Element> | Element[]): number;
+}
+export declare const feedback: FeedbackUI;