@hellotext/hellotext 2.0.8 → 2.1.0

package/index.d.ts

@@ -17,6 +17,7 @@ export interface HellotextConfig {
       secondaryColor?: string
       typography?: string
     }
+    strategy?: 'absolute' | 'fixed'
   }
   session?: string
   autoGenerateSession?: boolean

package/lib/controllers/mixins/usePopover.cjs

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePopover = void 0;
 var _dom = require("@floating-ui/dom");
-var _hellotext = _interopRequireDefault(require("../../hellotext"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _core = require("../../core");
 const usePopover = controller => {
   Object.assign(controller, {
     show() {
@@ -25,14 +24,17 @@ const usePopover = controller => {
       this.floatingUICleanup = (0, _dom.autoUpdate)(trigger, popover, () => {
         (0, _dom.computePosition)(trigger, popover, {
           placement: this.placementValue,
-          middleware: this.middlewares
+          middleware: this.middlewares,
+          strategy: _core.Configuration.webchat.strategy
         }).then(({
           x,
-          y
+          y,
+          strategy
         }) => {
           const newStyle = {
             left: `${x}px`,
-            top: `${y}px`
+            top: `${y}px`,
+            position: strategy
           };
           Object.assign(popover.style, newStyle);
         });
@@ -42,13 +44,13 @@ const usePopover = controller => {
       if (this.disabledValue) return;
       if (this.openValue) {
         this.popoverTarget.showPopover();
-        this.popoverTarget.setAttribute("aria-expanded", "true");
+        this.popoverTarget.setAttribute('aria-expanded', 'true');
         if (this['onPopoverOpened']) {
           this.onPopoverOpened();
         }
       } else {
         this.popoverTarget.hidePopover();
-        this.popoverTarget.removeAttribute("aria-expanded");
+        this.popoverTarget.removeAttribute('aria-expanded');
         if (this['onPopoverClosed']) {
           this.onPopoverClosed();
         }

package/lib/controllers/mixins/usePopover.js

@@ -1,5 +1,5 @@
 import { autoUpdate, computePosition } from '@floating-ui/dom';
-import Hellotext from "../../hellotext";
+import { Configuration } from '../../core';
 export var usePopover = controller => {
   Object.assign(controller, {
     show() {
@@ -19,15 +19,18 @@ export var usePopover = controller => {
       this.floatingUICleanup = autoUpdate(trigger, popover, () => {
         computePosition(trigger, popover, {
           placement: this.placementValue,
-          middleware: this.middlewares
+          middleware: this.middlewares,
+          strategy: Configuration.webchat.strategy
         }).then(_ref2 => {
           var {
             x,
-            y
+            y,
+            strategy
           } = _ref2;
           var newStyle = {
             left: "".concat(x, "px"),
-            top: "".concat(y, "px")
+            top: "".concat(y, "px"),
+            position: strategy
           };
           Object.assign(popover.style, newStyle);
         });
@@ -37,13 +40,13 @@ export var usePopover = controller => {
       if (this.disabledValue) return;
       if (this.openValue) {
         this.popoverTarget.showPopover();
-        this.popoverTarget.setAttribute("aria-expanded", "true");
+        this.popoverTarget.setAttribute('aria-expanded', 'true');
         if (this['onPopoverOpened']) {
           this.onPopoverOpened();
         }
       } else {
         this.popoverTarget.hidePopover();
-        this.popoverTarget.removeAttribute("aria-expanded");
+        this.popoverTarget.removeAttribute('aria-expanded');
         if (this['onPopoverClosed']) {
           this.onPopoverClosed();
         }

package/lib/core/configuration/webchat.cjs

@@ -24,6 +24,20 @@ const placements = {
   BOTTOM_RIGHT: 'bottom-right'
 };
 
+/**
+ * @typedef {'absolute' | 'fixed'} Strategy
+ * @description Valid strategies for the webchat.
+ */
+
+/**
+ * @enum {Strategy}
+ */
+
+const strategies = {
+  ABSOLUTE: 'absolute',
+  FIXED: 'fixed'
+};
+
 /**
  * @typedef {'modal' | 'popover'} Behaviour
  */
@@ -54,6 +68,7 @@ const behaviors = {
  * @property {String} triggerClasses - additional classes to apply to the webchat popup trigger.
  * @property {Behaviour} behaviour - the behaviour of the webchat, defaults to 'popover'.
  * @property {Style} style - the style of the webchat.
+ * @property {Strategy} strategy - the strategy used to position the webchat. Defaults to 'absolute'
  */
 exports.behaviors = behaviors;
 let Webchat = /*#__PURE__*/function () {
@@ -155,6 +170,20 @@ let Webchat = /*#__PURE__*/function () {
       }
       this._behaviour = value;
     }
+  }, {
+    key: "strategy",
+    get: function () {
+      if (this._strategy) {
+        return this._strategy;
+      }
+      return this.container == 'body' ? strategies.FIXED : strategies.ABSOLUTE;
+    },
+    set: function (value) {
+      if (value && !Object.values(strategies).includes(value)) {
+        throw new Error(`Invalid strategy value: ${value}`);
+      }
+      this._strategy = value;
+    }
   }, {
     key: "assign",
     value: function assign(props) {
@@ -180,4 +209,5 @@ Webchat._placement = 'bottom-right';
 Webchat._classes = [];
 Webchat._triggerClasses = [];
 Webchat._style = {};
-Webchat._behaviour = behaviors.POPOVER;
+Webchat._behaviour = behaviors.POPOVER;
+Webchat._strategy = null;

package/lib/core/configuration/webchat.js

@@ -18,6 +18,20 @@ var placements = {
   BOTTOM_RIGHT: 'bottom-right'
 };
 
+/**
+ * @typedef {'absolute' | 'fixed'} Strategy
+ * @description Valid strategies for the webchat.
+ */
+
+/**
+ * @enum {Strategy}
+ */
+
+var strategies = {
+  ABSOLUTE: 'absolute',
+  FIXED: 'fixed'
+};
+
 /**
  * @typedef {'modal' | 'popover'} Behaviour
  */
@@ -48,6 +62,7 @@ var behaviors = {
  * @property {String} triggerClasses - additional classes to apply to the webchat popup trigger.
  * @property {Behaviour} behaviour - the behaviour of the webchat, defaults to 'popover'.
  * @property {Style} style - the style of the webchat.
+ * @property {Strategy} strategy - the strategy used to position the webchat. Defaults to 'absolute'
  */
 var Webchat = /*#__PURE__*/function () {
   function Webchat() {
@@ -149,6 +164,20 @@ var Webchat = /*#__PURE__*/function () {
       }
       this._behaviour = value;
     }
+  }, {
+    key: "strategy",
+    get: function get() {
+      if (this._strategy) {
+        return this._strategy;
+      }
+      return this.container == 'body' ? strategies.FIXED : strategies.ABSOLUTE;
+    },
+    set: function set(value) {
+      if (value && !Object.values(strategies).includes(value)) {
+        throw new Error("Invalid strategy value: ".concat(value));
+      }
+      this._strategy = value;
+    }
   }, {
     key: "assign",
     value: function assign(props) {
@@ -175,4 +204,5 @@ Webchat._classes = [];
 Webchat._triggerClasses = [];
 Webchat._style = {};
 Webchat._behaviour = behaviors.POPOVER;
-export { Webchat, behaviors };
+Webchat._strategy = null;
+export { behaviors, Webchat };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",
@@ -91,7 +91,7 @@
     "url": "https://github.com/hellotext/hellotext.js/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.12",
+    "@floating-ui/dom": "^1.7.3",
     "@hotwired/stimulus": "^3.0.0",
     "emoji-mart": "^5.6.0"
   },

package/src/controllers/mixins/usePopover.js

@@ -1,7 +1,7 @@
 import { autoUpdate, computePosition } from '@floating-ui/dom'
-import Hellotext from "../../hellotext";
+import { Configuration } from '../../core'
 
-export const usePopover = (controller) => {
+export const usePopover = controller => {
   Object.assign(controller, {
     show() {
       this.openValue = true
@@ -17,34 +17,36 @@ export const usePopover = (controller) => {
         computePosition(trigger, popover, {
           placement: this.placementValue,
           middleware: this.middlewares,
-        }).then(({x, y}) => {
+          strategy: Configuration.webchat.strategy,
+        }).then(({ x, y, strategy }) => {
           const newStyle = {
             left: `${x}px`,
-            top: `${y}px`
+            top: `${y}px`,
+            position: strategy,
           }
 
           Object.assign(popover.style, newStyle)
-        });
+        })
       })
     },
     openValueChanged() {
-      if(this.disabledValue) return
+      if (this.disabledValue) return
 
-      if(this.openValue) {
+      if (this.openValue) {
         this.popoverTarget.showPopover()
-        this.popoverTarget.setAttribute("aria-expanded", "true")
+        this.popoverTarget.setAttribute('aria-expanded', 'true')
 
-        if(this['onPopoverOpened']) {
+        if (this['onPopoverOpened']) {
           this.onPopoverOpened()
         }
       } else {
         this.popoverTarget.hidePopover()
-        this.popoverTarget.removeAttribute("aria-expanded")
+        this.popoverTarget.removeAttribute('aria-expanded')
 
-        if(this['onPopoverClosed']) {
+        if (this['onPopoverClosed']) {
           this.onPopoverClosed()
         }
       }
-    }
+    },
   })
 }

package/src/core/configuration/webchat.js

@@ -10,9 +10,22 @@ const placements = {
   TOP_LEFT: 'top-left',
   TOP_RIGHT: 'top-right',
   BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_RIGHT: 'bottom-right'
+  BOTTOM_RIGHT: 'bottom-right',
 }
 
+/**
+ * @typedef {'absolute' | 'fixed'} Strategy
+ * @description Valid strategies for the webchat.
+ */
+
+/**
+ * @enum {Strategy}
+ */
+
+const strategies = {
+  ABSOLUTE: 'absolute',
+  FIXED: 'fixed',
+}
 
 /**
  * @typedef {'modal' | 'popover'} Behaviour
@@ -23,7 +36,7 @@ const placements = {
  */
 const behaviors = {
   MODAL: 'modal',
-  POPOVER: 'popover'
+  POPOVER: 'popover',
 }
 
 /**
@@ -33,7 +46,6 @@ const behaviors = {
  * @property {string} typography - The typography style (e.g., font family).
  */
 
-
 /**
  * @class Webchat
  * @classdesc
@@ -45,6 +57,7 @@ const behaviors = {
  * @property {String} triggerClasses - additional classes to apply to the webchat popup trigger.
  * @property {Behaviour} behaviour - the behaviour of the webchat, defaults to 'popover'.
  * @property {Style} style - the style of the webchat.
+ * @property {Strategy} strategy - the strategy used to position the webchat. Defaults to 'absolute'
  */
 
 class Webchat {
@@ -55,6 +68,7 @@ class Webchat {
   static _triggerClasses = []
   static _style = {}
   static _behaviour = behaviors.POPOVER
+  static _strategy = null
 
   static set container(value) {
     this._container = value
@@ -65,7 +79,7 @@ class Webchat {
   }
 
   static set placement(value) {
-    if(!Object.values(placements).includes(value)) {
+    if (!Object.values(placements).includes(value)) {
       throw new Error(`Invalid placement value: ${value}`)
     }
 
@@ -77,34 +91,34 @@ class Webchat {
   }
 
   static set classes(value) {
-    if(!Array.isArray(value) && typeof value !== 'string') {
+    if (!Array.isArray(value) && typeof value !== 'string') {
       throw new Error('classes must be an array or a string')
     }
 
-    this._classes = value;
+    this._classes = value
   }
 
   static get classes() {
-    if(typeof this._classes === 'string') {
+    if (typeof this._classes === 'string') {
       return this._classes.split(',').map(c => c.trim())
     } else {
-      return this._classes;
+      return this._classes
     }
   }
 
   static set triggerClasses(value) {
-    if(!Array.isArray(value) && typeof value !== 'string') {
+    if (!Array.isArray(value) && typeof value !== 'string') {
       throw new Error('triggerClasses must be an array or a string')
     }
 
-    this._triggerClasses = value;
+    this._triggerClasses = value
   }
 
   static get triggerClasses() {
-    if(typeof this._triggerClasses === 'string') {
+    if (typeof this._triggerClasses === 'string') {
       return this._triggerClasses.split(',').map(c => c.trim())
     } else {
-      return this._triggerClasses;
+      return this._triggerClasses
     }
   }
 
@@ -125,20 +139,20 @@ class Webchat {
   }
 
   static set style(value) {
-    if(typeof value !== 'object') {
+    if (typeof value !== 'object') {
       throw new Error('Style must be an object')
     }
 
     Object.entries(value).forEach(([key, value]) => {
-      if(!['primaryColor', 'secondaryColor', 'typography'].includes(key)) {
+      if (!['primaryColor', 'secondaryColor', 'typography'].includes(key)) {
         throw new Error(`Invalid style property: ${key}`)
       }
 
-      if(key === 'typography') {
+      if (key === 'typography') {
         return
       }
 
-      if(!this.isHexOrRgba(value)) {
+      if (!this.isHexOrRgba(value)) {
         throw new Error(`Invalid color value: ${value} for ${key}. Colors must be hex or rgb/a.`)
       }
     })
@@ -151,15 +165,31 @@ class Webchat {
   }
 
   static set behaviour(value) {
-    if(!Object.values(behaviors).includes(value)) {
+    if (!Object.values(behaviors).includes(value)) {
       throw new Error(`Invalid behaviour value: ${value}`)
     }
 
     this._behaviour = value
   }
 
+  static get strategy() {
+    if (this._strategy) {
+      return this._strategy
+    }
+
+    return this.container == 'body' ? strategies.FIXED : strategies.ABSOLUTE
+  }
+
+  static set strategy(value) {
+    if (value && !Object.values(strategies).includes(value)) {
+      throw new Error(`Invalid strategy value: ${value}`)
+    }
+
+    this._strategy = value
+  }
+
   static assign(props) {
-    if(props) {
+    if (props) {
       Object.entries(props).forEach(([key, value]) => {
         this[key] = value
       })
@@ -169,8 +199,11 @@ class Webchat {
   }
 
   static isHexOrRgba(value) {
-    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value) || /^rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3},?\s*(0|1|0?\.\d+)?\s*\)$/.test(value);
+    return (
+      /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value) ||
+      /^rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3},?\s*(0|1|0?\.\d+)?\s*\)$/.test(value)
+    )
   }
 }
 
-export { Webchat, behaviors }
+export { behaviors, Webchat }