@openreplay/tracker 11.0.0 → 11.0.2

package/cjs/modules/userTesting/styles.d.ts

@@ -9,6 +9,7 @@ export declare const bgStyle: {
     alignItems: string;
     justifyContent: string;
     zIndex: number;
+    fontFamily: string;
 };
 export declare const containerStyle: {
     display: string;
@@ -27,6 +28,7 @@ export declare const containerWidgetStyle: {
     gap: string;
     'align-items': string;
     padding: string;
+    fontFamily: string;
     'border-radius': string;
     border: string;
     background: string;
@@ -50,6 +52,7 @@ export declare const descriptionStyle: {
     fontStyle: string;
     fontWeight: string;
     lineHeight: string;
+    whiteSpace: string;
 };
 export declare const noticeStyle: {
     color: string;
@@ -93,6 +96,8 @@ export declare const contentStyle: {
     flexDirection: string;
     alignItems: string;
     gap: string;
+    fontSize: string;
+    lineHeight: string;
 };
 export declare const titleWidgetStyle: {
     padding: string;
@@ -114,17 +119,14 @@ export declare const descriptionWidgetStyle: {
     boxSizing: string;
     display: string;
     width: string;
-    borderRadius: string;
-    border: string;
+    borderBottom: string;
     background: string;
     padding: string;
     alignSelf: string;
     color: string;
     fontFamily: string;
-    fontSize: string;
     fontStyle: string;
     fontWeight: string;
-    lineHeight: string;
 };
 export declare const endSectionStyle: {
     display: string;
@@ -133,17 +135,14 @@ export declare const endSectionStyle: {
     gap: string;
     boxSizing: string;
     width: string;
-    borderRadius: string;
-    border: string;
+    borderBottom: string;
     background: string;
     padding: string;
     alignSelf: string;
     color: string;
     fontFamily: string;
-    fontSize: string;
     fontStyle: string;
     fontWeight: string;
-    lineHeight: string;
 };
 export declare const symbolIcon: {
     fontSize: string;
@@ -174,9 +173,12 @@ export declare const buttonWidgetStyle: {
 };
 export declare const stopWidgetStyle: {
     marginTop: string;
+    marginBottom: string;
     cursor: string;
     display: string;
     fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
 };
 export declare const paginationStyle: {
     display: string;
@@ -189,21 +191,27 @@ export declare const paginationStyle: {
 };
 export declare const taskNumberActive: {
     display: string;
-    padding: string;
     flexDirection: string;
     alignItems: string;
+    justifyContent: string;
     borderRadius: string;
     outline: string;
+    fontSize: string;
+    height: string;
+    width: string;
 };
 export declare const taskNumberDone: {
     display: string;
-    padding: string;
     flexDirection: string;
     alignItems: string;
+    justifyContent: string;
     borderRadius: string;
     outline: string;
     boxShadow: string;
     background: string;
+    fontSize: string;
+    height: string;
+    width: string;
 };
 export declare const taskDescriptionCard: {
     borderRadius: string;
@@ -220,7 +228,8 @@ export declare const taskTextStyle: {
     fontWeight: string;
 };
 export declare const taskDescriptionStyle: {
-    color: string;
+    fontSize: string;
+    lineHeight: string;
 };
 export declare const taskButtonStyle: {
     marginRight: string;
@@ -258,3 +267,11 @@ export declare const taskButtonsRow: {
     width: string;
     boxSizing: string;
 };
+export declare const spinnerStyles: {
+    border: string;
+    width: string;
+    height: string;
+    borderRadius: string;
+    borderLeftColor: string;
+    animation: string;
+};

package/cjs/modules/userTesting/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.taskButtonsRow = exports.taskButtonBorderedStyle = exports.taskButtonStyle = exports.taskDescriptionStyle = exports.taskTextStyle = exports.taskDescriptionCard = exports.taskNumberDone = exports.taskNumberActive = exports.paginationStyle = exports.stopWidgetStyle = exports.buttonWidgetStyle = exports.symbolIcon = exports.endSectionStyle = exports.descriptionWidgetStyle = exports.titleWidgetStyle = exports.contentStyle = exports.sectionTitleStyle = exports.buttonStyle = exports.noticeStyle = exports.descriptionStyle = exports.titleStyle = exports.containerWidgetStyle = exports.containerStyle = exports.bgStyle = void 0;
+exports.spinnerStyles = exports.taskButtonsRow = exports.taskButtonBorderedStyle = exports.taskButtonStyle = exports.taskDescriptionStyle = exports.taskTextStyle = exports.taskDescriptionCard = exports.taskNumberDone = exports.taskNumberActive = exports.paginationStyle = exports.stopWidgetStyle = exports.buttonWidgetStyle = exports.symbolIcon = exports.endSectionStyle = exports.descriptionWidgetStyle = exports.titleWidgetStyle = exports.contentStyle = exports.sectionTitleStyle = exports.buttonStyle = exports.noticeStyle = exports.descriptionStyle = exports.titleStyle = exports.containerWidgetStyle = exports.containerStyle = exports.bgStyle = void 0;
 exports.bgStyle = {
     position: 'fixed',
     top: 0,
@@ -12,28 +12,30 @@ exports.bgStyle = {
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 999999,
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
 };
 exports.containerStyle = {
     display: 'flex',
     flexDirection: 'column',
-    gap: '8px',
+    gap: '2rem',
     alignItems: 'center',
     padding: '1.5rem',
-    borderRadius: '0.375rem',
+    borderRadius: '2px',
     border: '1px solid #D9D9D9',
     background: '#FFF',
-    width: '29rem',
+    width: '22rem',
 };
 exports.containerWidgetStyle = {
     display: 'flex',
     'flex-direction': 'column',
-    gap: '8px',
+    gap: 'unset',
     'align-items': 'center',
-    padding: '1rem',
-    'border-radius': '0.375rem',
+    padding: 'unset',
+    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    'border-radius': '2px',
     border: '1px solid #D9D9D9',
-    background: '#FFF',
-    width: '29rem',
+    background: 'rgba(255, 255, 255, 0.75)',
+    width: '22rem',
 };
 exports.titleStyle = {
     fontFamily: 'Verdana, sans-serif',
@@ -49,10 +51,11 @@ exports.descriptionStyle = {
     padding: '1.25rem 0rem',
     color: 'rgba(0, 0, 0, 0.85)',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
+    fontSize: '13px',
     fontStyle: 'normal',
     fontWeight: '400',
-    lineHeight: '1.5rem',
+    lineHeight: 'auto',
+    whiteSpace: 'pre-wrap',
 };
 exports.noticeStyle = {
     color: 'rgba(0, 0, 0, 0.85)',
@@ -83,9 +86,9 @@ exports.buttonStyle = {
 };
 exports.sectionTitleStyle = {
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    fontSize: '13px',
     fontWeight: '500',
-    lineHeight: '1.375rem',
+    lineHeight: 'auto',
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
@@ -96,39 +99,40 @@ exports.contentStyle = {
     flexDirection: 'column',
     alignItems: 'flex-start',
     gap: '0.625rem',
+    fontSize: '13px',
+    lineHeight: 'auto',
 };
 // New widget styles
 exports.titleWidgetStyle = {
     padding: '0.5rem',
     gap: '0.5rem',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '1.25rem',
+    fontSize: '16px',
     fontStyle: 'normal',
     fontWeight: '500',
-    lineHeight: '1.75rem',
+    lineHeight: 'auto',
     color: 'white',
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    borderRadius: '0.375rem',
-    background: 'rgba(0, 0, 0, 0.60)',
+    borderRadius: '2px',
+    background: 'rgba(0, 0, 0, 0.75)',
     boxSizing: 'border-box',
 };
 exports.descriptionWidgetStyle = {
     boxSizing: 'border-box',
     display: 'block',
     width: '100%',
-    borderRadius: '0.375rem',
-    border: '1px solid #D9D9D9',
+    borderBottom: '1px solid #D9D9D9',
     background: '#FFF',
-    padding: '0.625rem 1rem',
+    padding: '0.65rem',
     alignSelf: 'stretch',
     color: '#000',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    // fontSize: '0.875rem',
     fontStyle: 'normal',
     fontWeight: '400',
-    lineHeight: '1.375rem',
+    // lineHeight: '1.375rem',
 };
 exports.endSectionStyle = Object.assign(Object.assign({}, exports.descriptionWidgetStyle), { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.625rem' });
 exports.symbolIcon = {
@@ -159,10 +163,13 @@ exports.buttonWidgetStyle = {
     cursor: 'pointer',
 };
 exports.stopWidgetStyle = {
-    marginTop: '2rem',
+    marginTop: '1rem',
+    marginBottom: '1rem',
     cursor: 'pointer',
     display: 'block',
-    fontWeight: '600',
+    fontWeight: '500',
+    fontSize: '13px!important',
+    lineHeight: 'auto',
 };
 exports.paginationStyle = {
     display: 'flex',
@@ -175,21 +182,27 @@ exports.paginationStyle = {
 };
 exports.taskNumberActive = {
     display: 'flex',
-    padding: '0.0625rem 0.5rem',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '6.25em',
     outline: '1px solid #394EFF',
+    fontSize: '13px',
+    height: '24px',
+    width: '24px',
 };
 exports.taskNumberDone = {
     display: 'flex',
-    padding: '0.0625rem 0.5rem',
     flexDirection: 'column',
     alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: '6.25em',
     outline: '1px solid #D2DFFF',
     boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
     background: '#D2DFFF',
+    fontSize: '13px',
+    height: '24px',
+    width: '24px',
 };
 exports.taskDescriptionCard = {
     borderRadius: '0.375rem',
@@ -206,7 +219,8 @@ exports.taskTextStyle = {
     fontWeight: 'bold',
 };
 exports.taskDescriptionStyle = {
-    color: '#8C8C8C',
+    fontSize: '13px',
+    lineHeight: 'auto',
 };
 exports.taskButtonStyle = {
     marginRight: '0.5rem',
@@ -214,10 +228,10 @@ exports.taskButtonStyle = {
     color: '#394EFF',
     textAlign: 'center',
     fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
+    fontSize: '13px',
     fontStyle: 'normal',
     fontWeight: '500',
-    lineHeight: '1.375rem',
+    lineHeight: 'auto',
 };
 exports.taskButtonBorderedStyle = Object.assign(Object.assign({}, exports.taskButtonStyle), { display: 'flex', padding: '0.25rem 0.9375rem', justifyContent: 'center', alignItems: 'center', gap: '0.5rem', borderRadius: '0.25rem', border: '1px solid #394EFF' });
 exports.taskButtonsRow = {
@@ -227,3 +241,11 @@ exports.taskButtonsRow = {
     width: '100%',
     boxSizing: 'border-box',
 };
+exports.spinnerStyles = {
+    border: '4px solid rgba(255, 255, 255, 0.4)',
+    width: '16px',
+    height: '16px',
+    borderRadius: '50%',
+    borderLeftColor: '#fff',
+    animation: 'spin 0.5s linear infinite',
+};

package/cjs/modules/userTesting/utils.d.ts

@@ -0,0 +1,9 @@
+export declare function generateGrid(): HTMLDivElement;
+export declare function generateChevron(): HTMLDivElement;
+export declare function addKeyframes(): void;
+export declare function createSpinner(): HTMLDivElement;
+export declare function createElement(tag: string, className: string, styles: any, textContent?: string, id?: string): HTMLElement;
+export declare const TEST_START = "or_uxt_test_start";
+export declare const TASK_IND = "or_uxt_task_index";
+export declare const SESSION_ID = "or_uxt_session_id";
+export declare const TEST_ID = "or_uxt_test_id";

package/cjs/modules/userTesting/utils.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_ID = exports.SESSION_ID = exports.TASK_IND = exports.TEST_START = exports.createElement = exports.createSpinner = exports.addKeyframes = exports.generateChevron = exports.generateGrid = void 0;
+const styles_js_1 = require("./styles.js");
+function generateGrid() {
+    const grid = document.createElement('div');
+    grid.className = 'grid';
+    for (let i = 0; i < 16; i++) {
+        const cell = document.createElement('div');
+        Object.assign(cell.style, {
+            width: '2px',
+            height: '2px',
+            borderRadius: '10px',
+            background: 'white',
+        });
+        cell.className = 'cell';
+        grid.appendChild(cell);
+    }
+    Object.assign(grid.style, {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gridTemplateRows: 'repeat(4, 1fr)',
+        gap: '2px',
+        cursor: 'grab',
+    });
+    return grid;
+}
+exports.generateGrid = generateGrid;
+function generateChevron() {
+    const triangle = document.createElement('div');
+    Object.assign(triangle.style, {
+        width: '0',
+        height: '0',
+        borderLeft: '7px solid transparent',
+        borderRight: '7px solid transparent',
+        borderBottom: '7px solid white',
+    });
+    const container = document.createElement('div');
+    container.appendChild(triangle);
+    Object.assign(container.style, {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '16px',
+        height: '16px',
+        cursor: 'pointer',
+        marginLeft: 'auto',
+        transform: 'rotate(180deg)',
+    });
+    return container;
+}
+exports.generateChevron = generateChevron;
+function addKeyframes() {
+    const styleSheet = document.createElement('style');
+    styleSheet.type = 'text/css';
+    styleSheet.innerText = `@keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }`;
+    document.head.appendChild(styleSheet);
+}
+exports.addKeyframes = addKeyframes;
+function createSpinner() {
+    addKeyframes();
+    const spinner = document.createElement('div');
+    spinner.classList.add('spinner');
+    Object.assign(spinner.style, styles_js_1.spinnerStyles);
+    return spinner;
+}
+exports.createSpinner = createSpinner;
+function createElement(tag, className, styles, textContent, id) {
+    const element = document.createElement(tag);
+    element.className = className;
+    Object.assign(element.style, styles);
+    if (textContent) {
+        element.textContent = textContent;
+    }
+    if (id) {
+        element.id = id;
+    }
+    return element;
+}
+exports.createElement = createElement;
+exports.TEST_START = 'or_uxt_test_start';
+exports.TASK_IND = 'or_uxt_task_index';
+exports.SESSION_ID = 'or_uxt_session_id';
+exports.TEST_ID = 'or_uxt_test_id';