hypercrm 1.0.4 → 1.0.5

package/assets/widget.js

@@ -53,8 +53,8 @@
   const styles = `
     .hypercrm-widget-container {
       position: fixed;
-      bottom: 24px;
-      right: 24px;
+      bottom: calc(24px + var(--hypercrm-offset-bottom, 0px));
+      right: calc(24px + var(--hypercrm-offset-side, 0px));
       z-index: 2147483000;
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       color: var(--hypercrm-text-primary, #111827);
@@ -78,13 +78,17 @@
       --hypercrm-radius-lg: 20px;
       --hypercrm-radius-md: 16px;
       --hypercrm-radius-sm: 12px;
+      --hypercrm-offset-bottom: 0px;
+      --hypercrm-offset-side: 0px;
+      --hypercrm-offset-bottom-mobile: 0px;
+      --hypercrm-offset-side-mobile: 0px;
       color-scheme: light;
       -webkit-font-smoothing: antialiased;
     }
 
     .hypercrm-widget-container.hypercrm-position-left {
       right: auto;
-      left: 24px;
+      left: calc(24px + var(--hypercrm-offset-side, 0px));
     }
 
     .hypercrm-widget-container.hypercrm-position-left .hypercrm-widget-panel {
@@ -1291,15 +1295,19 @@
 
     @media (max-width: 640px) {
       .hypercrm-widget-container {
-        bottom: 16px;
-        right: 16px;
+        bottom: calc(16px + var(--hypercrm-offset-bottom-mobile, 0px));
+        right: calc(16px + var(--hypercrm-offset-side-mobile, 0px));
       }
 
       .hypercrm-widget-container.hypercrm-position-left {
-        left: 16px;
+        left: calc(16px + var(--hypercrm-offset-side-mobile, 0px));
         right: auto;
       }
 
+      .hypercrm-widget-container.hypercrm-mobile-disabled {
+        display: none;
+      }
+
       .hypercrm-toggle-btn {
         width: 56px;
         height: 56px;
@@ -1331,6 +1339,10 @@
       this.theme = { ...DEFAULT_THEME, ...(this.options.theme || {}) };
       this.colorModePreference = this.options.colorMode || 'light';
       this.position = this.normalizePosition(this.options.position);
+      this.offset = this.normalizeOffsets(this.options.offset);
+      const mobileOptions = this.options && typeof this.options.mobile === 'object' ? this.options.mobile : {};
+      this.mobileEnabled = mobileOptions?.enabled !== false;
+      this.mobileOffset = this.normalizeOffsets(mobileOptions?.offset);
       this.mediaColorQuery = null;
       this.systemColorListener = null;
       this.systemColorListenerAttached = false;
@@ -1401,6 +1413,22 @@
       return value === 'left' ? 'left' : 'right';
     }
 
+    normalizeOffsetValue(value) {
+      if (value === null || value === undefined || value === '') return 0;
+      const num = Number(value);
+      return Number.isFinite(num) ? num : 0;
+    }
+
+    normalizeOffsets(value) {
+      if (!value || typeof value !== 'object') {
+        return { bottom: 0, side: 0 };
+      }
+      return {
+        bottom: this.normalizeOffsetValue(value.bottom),
+        side: this.normalizeOffsetValue(value.side),
+      };
+    }
+
     applyPosition() {
       if (!this.container) return;
       const position = this.normalizePosition(this.position || this.options.position);
@@ -1414,6 +1442,41 @@
       this.applyPosition();
     }
 
+    applyOffsets() {
+      if (!this.container) return;
+      const offset = this.offset || { bottom: 0, side: 0 };
+      const mobileOffset = this.mobileOffset || { bottom: 0, side: 0 };
+      this.container.style.setProperty('--hypercrm-offset-bottom', `${offset.bottom}px`);
+      this.container.style.setProperty('--hypercrm-offset-side', `${offset.side}px`);
+      this.container.style.setProperty('--hypercrm-offset-bottom-mobile', `${mobileOffset.bottom}px`);
+      this.container.style.setProperty('--hypercrm-offset-side-mobile', `${mobileOffset.side}px`);
+    }
+
+    applyMobileVisibility() {
+      if (!this.container) return;
+      this.container.classList.toggle('hypercrm-mobile-disabled', this.mobileEnabled === false);
+    }
+
+    setOffset(offset) {
+      this.offset = this.normalizeOffsets(offset);
+      this.options.offset = this.offset;
+      this.applyOffsets();
+    }
+
+    setMobileOffset(offset) {
+      this.mobileOffset = this.normalizeOffsets(offset);
+      const current = this.options.mobile && typeof this.options.mobile === 'object' ? this.options.mobile : {};
+      this.options.mobile = { ...current, offset: this.mobileOffset };
+      this.applyOffsets();
+    }
+
+    setMobileEnabled(enabled) {
+      this.mobileEnabled = enabled !== false;
+      const current = this.options.mobile && typeof this.options.mobile === 'object' ? this.options.mobile : {};
+      this.options.mobile = { ...current, enabled: this.mobileEnabled };
+      this.applyMobileVisibility();
+    }
+
     absUrl(url) {
       if (!url) return url;
       if (/^https?:/i.test(url)) return url;
@@ -1618,6 +1681,8 @@
       document.body.appendChild(container);
       this.container = container;
       this.applyPosition();
+      this.applyOffsets();
+      this.applyMobileVisibility();
 
       // Lightbox overlay
       const lightbox = document.createElement('div');
@@ -2371,6 +2436,17 @@
         if (!this.options.position && this.orgInfo?.widget?.position) {
           this.setPosition(this.orgInfo.widget.position);
         }
+        const orgOffset = this.orgInfo?.widget?.offset;
+        if (!this.options.offset && orgOffset) {
+          this.setOffset(orgOffset);
+        }
+        const orgMobile = this.orgInfo?.widget?.mobile || {};
+        if (typeof this.options.mobile?.enabled !== 'boolean' && typeof orgMobile.enabled === 'boolean') {
+          this.setMobileEnabled(orgMobile.enabled);
+        }
+        if (!this.options.mobile?.offset && orgMobile.offset) {
+          this.setMobileOffset(orgMobile.offset);
+        }
         const iconUrl = this.orgInfo?.widget?.iconUrl;
         this.orgIconUrl = iconUrl ? this.absUrl(iconUrl) : null;
         this.updateHeaderIcons();
@@ -2954,6 +3030,15 @@
     setPosition(position) {
       if (activeWidget) activeWidget.setPosition(position);
     },
+    setOffset(offset) {
+      if (activeWidget) activeWidget.setOffset(offset);
+    },
+    setMobileOffset(offset) {
+      if (activeWidget) activeWidget.setMobileOffset(offset);
+    },
+    setMobileEnabled(enabled) {
+      if (activeWidget) activeWidget.setMobileEnabled(enabled);
+    },
     open() {
       if (activeWidget) activeWidget.openWidget();
     },

package/dist/index.d.ts

@@ -6,6 +6,17 @@ export interface WidgetOptions {
     theme?: Record<string, string>;
     colorMode?: 'light' | 'dark' | 'auto';
     position?: 'left' | 'right';
+    offset?: {
+        bottom?: number;
+        side?: number;
+    };
+    mobile?: {
+        enabled?: boolean;
+        offset?: {
+            bottom?: number;
+            side?: number;
+        };
+    };
     autoOpen?: boolean;
     debug?: boolean;
     scriptUrl?: string;
@@ -15,12 +26,30 @@ export declare const destroyWidget: () => void;
 export declare const setWidgetTheme: (theme: Record<string, string>) => Promise<void>;
 export declare const setWidgetColorMode: (mode: "light" | "dark" | "auto") => Promise<void>;
 export declare const setWidgetPosition: (position: "left" | "right") => Promise<void>;
+export declare const setWidgetOffset: (offset: {
+    bottom?: number;
+    side?: number;
+}) => Promise<void>;
+export declare const setWidgetMobileOffset: (offset: {
+    bottom?: number;
+    side?: number;
+}) => Promise<void>;
+export declare const setWidgetMobileEnabled: (enabled: boolean) => Promise<void>;
 declare const _default: {
     init: (options?: WidgetOptions) => Promise<any>;
     destroy: () => void;
     setTheme: (theme: Record<string, string>) => Promise<void>;
     setColorMode: (mode: "light" | "dark" | "auto") => Promise<void>;
     setPosition: (position: "left" | "right") => Promise<void>;
+    setOffset: (offset: {
+        bottom?: number;
+        side?: number;
+    }) => Promise<void>;
+    setMobileOffset: (offset: {
+        bottom?: number;
+        side?: number;
+    }) => Promise<void>;
+    setMobileEnabled: (enabled: boolean) => Promise<void>;
 };
 export default _default;
 declare global {
@@ -31,6 +60,15 @@ declare global {
             setTheme: (theme?: Record<string, string>) => void;
             setColorMode: (mode: 'light' | 'dark' | 'auto') => void;
             setPosition: (position: 'left' | 'right') => void;
+            setOffset: (offset: {
+                bottom?: number;
+                side?: number;
+            }) => void;
+            setMobileOffset: (offset: {
+                bottom?: number;
+                side?: number;
+            }) => void;
+            setMobileEnabled: (enabled: boolean) => void;
             open: () => void;
             close: () => void;
             toggle: () => void;

package/dist/index.js

@@ -95,10 +95,25 @@ export const setWidgetPosition = async (position) => {
     await ensureScriptLoaded();
     window.HyperCRMWidget.setPosition(position);
 };
+export const setWidgetOffset = async (offset) => {
+    await ensureScriptLoaded();
+    window.HyperCRMWidget.setOffset(offset || {});
+};
+export const setWidgetMobileOffset = async (offset) => {
+    await ensureScriptLoaded();
+    window.HyperCRMWidget.setMobileOffset(offset || {});
+};
+export const setWidgetMobileEnabled = async (enabled) => {
+    await ensureScriptLoaded();
+    window.HyperCRMWidget.setMobileEnabled(enabled);
+};
 export default {
     init: initWidget,
     destroy: destroyWidget,
     setTheme: setWidgetTheme,
     setColorMode: setWidgetColorMode,
     setPosition: setWidgetPosition,
+    setOffset: setWidgetOffset,
+    setMobileOffset: setWidgetMobileOffset,
+    setMobileEnabled: setWidgetMobileEnabled,
 };

package/dist/react.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react';
-import { initWidget, destroyWidget, setWidgetTheme, setWidgetColorMode, setWidgetPosition, } from './index';
+import { initWidget, destroyWidget, setWidgetTheme, setWidgetColorMode, setWidgetPosition, setWidgetOffset, setWidgetMobileOffset, setWidgetMobileEnabled, } from './index';
 export const useHyperCRMWidget = (options = {}) => {
-    const { apiUrl, apiKey, orgId, mount, theme, colorMode, position, autoOpen, debug, scriptUrl, } = options;
+    const { apiUrl, apiKey, orgId, mount, theme, colorMode, position, offset, mobile, autoOpen, debug, scriptUrl, } = options;
     const readyRef = useRef(false);
-    const latestRef = useRef({ theme, colorMode, position });
+    const latestRef = useRef({ theme, colorMode, position, offset, mobile });
     useEffect(() => {
-        latestRef.current = { theme, colorMode, position };
-    }, [theme, colorMode, position]);
+        latestRef.current = { theme, colorMode, position, offset, mobile };
+    }, [theme, colorMode, position, offset, mobile]);
     useEffect(() => {
         let cancelled = false;
         readyRef.current = false;
@@ -18,11 +18,14 @@ export const useHyperCRMWidget = (options = {}) => {
             theme: latestRef.current.theme,
             colorMode: latestRef.current.colorMode,
             position: latestRef.current.position,
+            offset: latestRef.current.offset,
+            mobile: latestRef.current.mobile,
             autoOpen,
             debug,
             scriptUrl,
         })
             .then(() => {
+            var _a, _b;
             if (cancelled)
                 return;
             readyRef.current = true;
@@ -32,6 +35,12 @@ export const useHyperCRMWidget = (options = {}) => {
                 setWidgetColorMode(latest.colorMode);
             if (latest.position)
                 setWidgetPosition(latest.position);
+            if (latest.offset)
+                setWidgetOffset(latest.offset);
+            if ((_a = latest.mobile) === null || _a === void 0 ? void 0 : _a.offset)
+                setWidgetMobileOffset(latest.mobile.offset);
+            if (typeof ((_b = latest.mobile) === null || _b === void 0 ? void 0 : _b.enabled) === 'boolean')
+                setWidgetMobileEnabled(latest.mobile.enabled);
         })
             .catch((err) => {
             if (debug)
@@ -58,6 +67,19 @@ export const useHyperCRMWidget = (options = {}) => {
             return;
         setWidgetPosition(position);
     }, [position]);
+    useEffect(() => {
+        if (!readyRef.current || !offset)
+            return;
+        setWidgetOffset(offset);
+    }, [offset]);
+    useEffect(() => {
+        if (!readyRef.current)
+            return;
+        if (mobile === null || mobile === void 0 ? void 0 : mobile.offset)
+            setWidgetMobileOffset(mobile.offset);
+        if (typeof (mobile === null || mobile === void 0 ? void 0 : mobile.enabled) === 'boolean')
+            setWidgetMobileEnabled(mobile.enabled);
+    }, [mobile]);
 };
 export const HyperCRMWidget = (props) => {
     useHyperCRMWidget(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hypercrm",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "HyperCRM widget loader with optional React component.",
   "type": "module",
   "main": "./dist/index.js",