@meteorwallet/gleap
Version:
908 lines (782 loc) • 1.14 MB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["Gleap"] = factory();
else
root["Gleap"] = factory();
})(this, () => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 561:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.getAttributes = getAttributes;
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
/**
* Returns the Attribute selectors of the element
* @param { DOM Element } element
* @param { Array } array of attributes to ignore
* @return { Array }
*/
function getAttributes(el) {
var attributesToIgnore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['id', 'class', 'length'];
var attributes = el.attributes;
var attrs = [].concat(_toConsumableArray(attributes));
return attrs.reduce(function (sum, next) {
if (!(attributesToIgnore.indexOf(next.nodeName) > -1)) {
sum.push('[' + next.nodeName + '="' + next.value + '"]');
}
return sum;
}, []);
}
/***/ }),
/***/ 770:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.getClasses = getClasses;
exports.getClassSelectors = getClassSelectors;
/**
* Get class names for an element
*
* @pararm { Element } el
* @return { Array }
*/
function getClasses(el) {
if (!el.hasAttribute('class')) {
return [];
}
try {
var classList = Array.prototype.slice.call(el.classList);
// return only the valid CSS selectors based on RegEx
return classList.filter(function (item) {
return !/^[a-z_-][a-z\d_-]*$/i.test(item) ? null : item;
});
} catch (e) {
var className = el.getAttribute('class');
// remove duplicate and leading/trailing whitespaces
className = className.trim().replace(/\s+/g, ' ');
// split into separate classnames
return className.split(' ');
}
}
/**
* Returns the Class selectors of the element
* @param { Object } element
* @return { Array }
*/
function getClassSelectors(el) {
var classList = getClasses(el).filter(Boolean);
return classList.map(function (cl) {
return '.' + cl;
});
}
/***/ }),
/***/ 584:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.getCombinations = getCombinations;
/**
* Recursively combinate items.
* @param { Array } result
* @param { Array } items
* @param { Array } data
* @param { Number } start
* @param { Number } end
* @param { Number } index
* @param { Number } k
*/
function kCombinations(result, items, data, start, end, index, k) {
if (index === k) {
result.push(data.slice(0, index).join(''));
return;
}
for (var i = start; i <= end && end - i + 1 >= k - index; ++i) {
data[index] = items[i];
kCombinations(result, items, data, i + 1, end, index + 1, k);
}
}
/**
* Returns all the possible selector combinations
* @param { Array } items
* @param { Number } k
* @return { Array }
*/
function getCombinations(items, k) {
var result = [],
n = items.length,
data = [];
for (var l = 1; l <= k; ++l) {
kCombinations(result, items, data, 0, n - 1, 0, l);
}
return result;
}
/***/ }),
/***/ 169:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.getID = getID;
/**
* Returns the Tag of the element
* @param { Object } element
* @return { String }
*/
function getID(el) {
var id = el.getAttribute('id');
if (id !== null && id !== '') {
// if the ID starts with a number or contains ":" selecting with a hash will cause a DOMException
return id.match(/(?:^\d|:)/) ? '[id="' + id + '"]' : '#' + id;
}
return null;
}
/***/ }),
/***/ 64:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.getNthChild = getNthChild;
var _isElement = __webpack_require__(440);
/**
* Returns the selectors based on the position of the element relative to its siblings
* @param { Object } element
* @return { Array }
*/
function getNthChild(element) {
var counter = 0;
var k = void 0;
var sibling = void 0;
var parentNode = element.parentNode;
if (Boolean(parentNode)) {
var childNodes = parentNode.childNodes;
var len = childNodes.length;
for (k = 0; k < len; k++) {
sibling = childNodes[k];
if ((0, _isElement.isElement)(sibling)) {
counter++;
if (sibling === element) {
return ':nth-child(' + counter + ')';
}
}
}
}
return null;
}
/***/ }),
/***/ 175:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.getParents = getParents;
var _isElement = __webpack_require__(440);
/**
* Returns all the element and all of its parents
* @param { DOM Element }
* @return { Array of DOM elements }
*/
function getParents(el) {
var parents = [];
var currentElement = el;
while ((0, _isElement.isElement)(currentElement)) {
parents.push(currentElement);
currentElement = currentElement.parentNode;
}
return parents;
}
/***/ }),
/***/ 970:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.getTag = getTag;
/**
* Returns the Tag of the element
* @param { Object } element
* @return { String }
*/
function getTag(el) {
return el.tagName.toLowerCase().replace(/:/g, '\\:');
}
/***/ }),
/***/ 924:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
var __webpack_unused_export__;
__webpack_unused_export__ = ({
value: true
});
exports.A = unique;
var _getID = __webpack_require__(169);
var _getClasses = __webpack_require__(770);
var _getCombinations = __webpack_require__(584);
var _getAttributes = __webpack_require__(561);
var _getNthChild = __webpack_require__(64);
var _getTag = __webpack_require__(970);
var _isUnique = __webpack_require__(213);
var _getParents = __webpack_require__(175);
/**
* Returns all the selectors of the elmenet
* @param { Object } element
* @return { Object }
*/
/**
* Expose `unique`
*/
function getAllSelectors(el, selectors, attributesToIgnore) {
var funcs = {
'Tag': _getTag.getTag,
'NthChild': _getNthChild.getNthChild,
'Attributes': function Attributes(elem) {
return (0, _getAttributes.getAttributes)(elem, attributesToIgnore);
},
'Class': _getClasses.getClassSelectors,
'ID': _getID.getID
};
return selectors.reduce(function (res, next) {
res[next] = funcs[next](el);
return res;
}, {});
}
/**
* Tests uniqueNess of the element inside its parent
* @param { Object } element
* @param { String } Selectors
* @return { Boolean }
*/
function testUniqueness(element, selector) {
var parentNode = element.parentNode;
var elements = parentNode.querySelectorAll(selector);
return elements.length === 1 && elements[0] === element;
}
/**
* Tests all selectors for uniqueness and returns the first unique selector.
* @param { Object } element
* @param { Array } selectors
* @return { String }
*/
function getFirstUnique(element, selectors) {
return selectors.find(testUniqueness.bind(null, element));
}
/**
* Checks all the possible selectors of an element to find one unique and return it
* @param { Object } element
* @param { Array } items
* @param { String } tag
* @return { String }
*/
function getUniqueCombination(element, items, tag) {
var combinations = (0, _getCombinations.getCombinations)(items, 3),
firstUnique = getFirstUnique(element, combinations);
if (Boolean(firstUnique)) {
return firstUnique;
}
if (Boolean(tag)) {
combinations = combinations.map(function (combination) {
return tag + combination;
});
firstUnique = getFirstUnique(element, combinations);
if (Boolean(firstUnique)) {
return firstUnique;
}
}
return null;
}
/**
* Returns a uniqueSelector based on the passed options
* @param { DOM } element
* @param { Array } options
* @return { String }
*/
function getUniqueSelector(element, selectorTypes, attributesToIgnore, excludeRegex) {
var foundSelector = void 0;
var elementSelectors = getAllSelectors(element, selectorTypes, attributesToIgnore);
if (excludeRegex && excludeRegex instanceof RegExp) {
elementSelectors.ID = excludeRegex.test(elementSelectors.ID) ? null : elementSelectors.ID;
elementSelectors.Class = elementSelectors.Class.filter(function (className) {
return !excludeRegex.test(className);
});
}
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = selectorTypes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var selectorType = _step.value;
var ID = elementSelectors.ID,
Tag = elementSelectors.Tag,
Classes = elementSelectors.Class,
Attributes = elementSelectors.Attributes,
NthChild = elementSelectors.NthChild;
switch (selectorType) {
case 'ID':
if (Boolean(ID) && testUniqueness(element, ID)) {
return ID;
}
break;
case 'Tag':
if (Boolean(Tag) && testUniqueness(element, Tag)) {
return Tag;
}
break;
case 'Class':
if (Boolean(Classes) && Classes.length) {
foundSelector = getUniqueCombination(element, Classes, Tag);
if (foundSelector) {
return foundSelector;
}
}
break;
case 'Attributes':
if (Boolean(Attributes) && Attributes.length) {
foundSelector = getUniqueCombination(element, Attributes, Tag);
if (foundSelector) {
return foundSelector;
}
}
break;
case 'NthChild':
if (Boolean(NthChild)) {
return NthChild;
}
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
return '*';
}
/**
* Generate unique CSS selector for given DOM element
*
* @param {Element} el
* @return {String}
* @api private
*/
function unique(el) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _options$selectorType = options.selectorTypes,
selectorTypes = _options$selectorType === undefined ? ['ID', 'Class', 'Tag', 'NthChild'] : _options$selectorType,
_options$attributesTo = options.attributesToIgnore,
attributesToIgnore = _options$attributesTo === undefined ? ['id', 'class', 'length'] : _options$attributesTo,
_options$excludeRegex = options.excludeRegex,
excludeRegex = _options$excludeRegex === undefined ? null : _options$excludeRegex;
var allSelectors = [];
var parents = (0, _getParents.getParents)(el);
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = parents[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var elem = _step2.value;
var selector = getUniqueSelector(elem, selectorTypes, attributesToIgnore, excludeRegex);
if (Boolean(selector)) {
allSelectors.push(selector);
}
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
var selectors = [];
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = allSelectors[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var it = _step3.value;
selectors.unshift(it);
var _selector = selectors.join(' > ');
if ((0, _isUnique.isUnique)(el, _selector)) {
return _selector;
}
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
return null;
}
/***/ }),
/***/ 440:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
exports.isElement = isElement;
/**
* Determines if the passed el is a DOM element
*/
function isElement(el) {
var isElem = void 0;
if ((typeof HTMLElement === 'undefined' ? 'undefined' : _typeof(HTMLElement)) === 'object') {
isElem = el instanceof HTMLElement;
} else {
isElem = !!el && (typeof el === 'undefined' ? 'undefined' : _typeof(el)) === 'object' && el.nodeType === 1 && typeof el.nodeName === 'string';
}
return isElem;
}
/***/ }),
/***/ 213:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.isUnique = isUnique;
/**
* Checks if the selector is unique
* @param { Object } element
* @param { String } selector
* @return { Array }
*/
function isUnique(el, selector) {
if (!Boolean(selector)) return false;
var elems = el.ownerDocument.querySelectorAll(selector);
return elems.length === 1 && elems[0] === el;
}
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ src)
});
;// CONCATENATED MODULE: ./src/GleapFeedbackButtonManager.js
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var GleapFeedbackButtonManager = /*#__PURE__*/function () {
function GleapFeedbackButtonManager() {
_classCallCheck(this, GleapFeedbackButtonManager);
_defineProperty(this, "feedbackButton", null);
_defineProperty(this, "injectedFeedbackButton", false);
_defineProperty(this, "buttonHidden", null);
_defineProperty(this, "lastButtonIcon", null);
}
_createClass(GleapFeedbackButtonManager, [{
key: "destroy",
value: function destroy() {
if (this.feedbackButton) {
this.feedbackButton.remove();
this.feedbackButton = null;
}
this.buttonHidden = null;
this.lastButtonIcon = null;
this.injectedFeedbackButton = false;
this.instance = null;
}
/**
* Toggles the feedback button visibility.
* @param {*} show
* @returns
*/
}, {
key: "toggleFeedbackButton",
value: function toggleFeedbackButton(show) {
this.buttonHidden = !show;
GleapFeedbackButtonManager.getInstance().updateFeedbackButtonState();
GleapNotificationManager.getInstance().updateContainerStyle();
}
}, {
key: "feedbackButtonPressed",
value: function feedbackButtonPressed() {
var frameManager = GleapFrameManager.getInstance();
if (frameManager.isOpened()) {
frameManager.hideWidget();
} else {
frameManager.setAppMode("widget");
frameManager.showWidget();
}
}
/**
* Injects the feedback button into the current DOM.
*/
}, {
key: "injectFeedbackButton",
value: function injectFeedbackButton() {
var _this = this;
if (this.injectedFeedbackButton) {
return;
}
this.injectedFeedbackButton = true;
var elem = document.createElement("div");
elem.addEventListener("click", function () {
_this.feedbackButtonPressed();
});
document.body.appendChild(elem);
this.feedbackButton = elem;
this.updateFeedbackButtonState();
}
}, {
key: "updateNotificationBadge",
value: function updateNotificationBadge(count) {
var notificationBadge = document.querySelector(".bb-notification-bubble");
if (!notificationBadge) {
return;
}
var notificationHiddenClass = "bb-notification-bubble--hidden";
if (count > 0) {
notificationBadge.classList.remove(notificationHiddenClass);
notificationBadge.innerText = count;
} else {
notificationBadge.classList.add(notificationHiddenClass);
}
}
}, {
key: "refresh",
value: function refresh() {
var feedbackButton = document.querySelector(".bb-feedback-button");
if (feedbackButton) {
this.updateFeedbackButtonText();
this.updateFeedbackButtonState();
} else {
this.injectedFeedbackButton = false;
this.feedbackButton = null;
this.buttonHidden = null;
this.lastButtonIcon = null;
this.injectFeedbackButton();
}
}
}, {
key: "updateFeedbackButtonText",
value: function updateFeedbackButtonText() {
var flowConfig = GleapConfigManager.getInstance().getFlowConfig();
if (!(flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC || flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_BOTTOM || flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_LEFT)) {
return;
}
var feedbackButton = document.querySelector(".bb-feedback-button-classic");
if (!feedbackButton) {
return;
}
feedbackButton.innerText = flowConfig.widgetButtonText;
}
/**
* Updates the feedback button state
* @returns
*/
}, {
key: "updateFeedbackButtonState",
value: function updateFeedbackButtonState() {
if (this.feedbackButton === null) {
return;
}
var flowConfig = GleapConfigManager.getInstance().getFlowConfig();
var buttonIcon = "";
if (flowConfig.buttonLogo) {
buttonIcon = "<img class=\"bb-logo-logo\" src=\"".concat(flowConfig.buttonLogo, "\" alt=\"Feedback Button\" />");
} else {
buttonIcon = loadIcon("button", "#fff");
}
this.feedbackButton.className = "bb-feedback-button gleap-font gl-block";
this.feedbackButton.setAttribute("dir", GleapTranslationManager.getInstance().isRTLLayout ? "rtl" : "ltr");
if (flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC || flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_BOTTOM || flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_LEFT) {
this.feedbackButton.classList.add("bb-feedback-button--classic-button-style");
this.feedbackButton.innerHTML = "<div class=\"bb-feedback-button-classic ".concat(flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_LEFT ? "bb-feedback-button-classic--left" : "").concat(flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_BOTTOM ? "bb-feedback-button-classic--bottom" : "", "\">").concat(flowConfig.widgetButtonText, "</div>");
} else {
if (buttonIcon !== this.lastButtonIcon) {
this.feedbackButton.innerHTML = "<div class=\"bb-feedback-button-icon\">".concat(buttonIcon).concat(loadIcon("arrowdown", "#fff"), "</div><div class=\"bb-notification-bubble bb-notification-bubble--hidden\"></div>");
}
}
// Prevent dom update if not needed.
this.lastButtonIcon = buttonIcon;
var hideButton = false;
if (GleapFeedbackButtonManager.getInstance().buttonHidden === null) {
if (flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_NONE) {
hideButton = true;
}
} else {
if (GleapFeedbackButtonManager.getInstance().buttonHidden) {
hideButton = true;
}
}
if (hideButton) {
this.feedbackButton.classList.add("bb-feedback-button--disabled");
}
if (flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_BOTTOM_LEFT) {
this.feedbackButton.classList.add("bb-feedback-button--bottomleft");
}
if (GleapFrameManager.getInstance().isOpened()) {
this.feedbackButton.classList.add("bb-feedback-button--open");
}
var appMode = GleapFrameManager.getInstance().appMode;
if (appMode === "survey" || appMode === "survey_full" || appMode === "survey_web") {
this.feedbackButton.classList.add("bb-feedback-button--survey");
}
if (flowConfig.hideForGuests === true && !GleapSession.getInstance().isUser()) {
this.feedbackButton.classList.add("bb-feedback-button--hidden");
}
}
}], [{
key: "getInstance",
value: function getInstance() {
if (!this.instance) {
this.instance = new GleapFeedbackButtonManager();
}
return this.instance;
}
}]);
return GleapFeedbackButtonManager;
}();
// Feedback button types
_defineProperty(GleapFeedbackButtonManager, "FEEDBACK_BUTTON_BOTTOM_RIGHT", "BOTTOM_RIGHT");
_defineProperty(GleapFeedbackButtonManager, "FEEDBACK_BUTTON_BOTTOM_LEFT", "BOTTOM_LEFT");
_defineProperty(GleapFeedbackButtonManager, "FEEDBACK_BUTTON_CLASSIC", "BUTTON_CLASSIC");
_defineProperty(GleapFeedbackButtonManager, "FEEDBACK_BUTTON_CLASSIC_LEFT", "BUTTON_CLASSIC_LEFT");
_defineProperty(GleapFeedbackButtonManager, "FEEDBACK_BUTTON_CLASSIC_BOTTOM", "BUTTON_CLASSIC_BOTTOM");
_defineProperty(GleapFeedbackButtonManager, "FEEDBACK_BUTTON_NONE", "BUTTON_NONE");
// GleapFeedbackButtonManager singleton
_defineProperty(GleapFeedbackButtonManager, "instance", void 0);
;// CONCATENATED MODULE: ./src/UI.js
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var calculateShadeColor = function calculateShadeColor(col, amt) {
col = col.replace(/^#/, "");
if (col.length === 3) col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
var _col$match = col.match(/.{2}/g),
_col$match2 = _slicedToArray(_col$match, 3),
r = _col$match2[0],
g = _col$match2[1],
b = _col$match2[2];
var _ref = [parseInt(r, 16) + amt, parseInt(g, 16) + amt, parseInt(b, 16) + amt];
r = _ref[0];
g = _ref[1];
b = _ref[2];
r = Math.max(Math.min(255, r), 0).toString(16);
g = Math.max(Math.min(255, g), 0).toString(16);
b = Math.max(Math.min(255, b), 0).toString(16);
var rr = (r.length < 2 ? "0" : "") + r;
var gg = (g.length < 2 ? "0" : "") + g;
var bb = (b.length < 2 ? "0" : "") + b;
return "#".concat(rr).concat(gg).concat(bb);
};
var calculateContrast = function calculateContrast(hex) {
var r = parseInt(hex.substr(1, 2), 16),
g = parseInt(hex.substr(3, 2), 16),
b = parseInt(hex.substr(5, 2), 16),
yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq >= 160 ? "#000000" : "#ffffff";
};
var widgetMaxHeight = 700;
var injectStyledCSS = function injectStyledCSS(primaryColor, headerColor, buttonColor, borderRadius, backgroundColor, buttonX, buttonY, buttonStyle) {
var contrastColor = calculateContrast(primaryColor);
var contrastButtonColor = calculateContrast(buttonColor);
var contrastBackgroundColor = calculateContrast(backgroundColor);
var contrastHeaderColor = calculateContrast(headerColor);
var isDarkMode = contrastBackgroundColor === "#ffffff";
var headerDarkColor = calculateShadeColor(headerColor, contrastHeaderColor === "#ffffff" ? -35 : -15);
var subTextColor = isDarkMode ? calculateShadeColor(backgroundColor, 100) : calculateShadeColor(backgroundColor, -120);
var backgroundColorHover = isDarkMode ? calculateShadeColor(backgroundColor, 30) : calculateShadeColor(backgroundColor, -12);
var hoverHoverColor = isDarkMode ? calculateShadeColor(backgroundColor, 80) : calculateShadeColor(backgroundColor, -30);
var borderRadius = parseInt(borderRadius, 10);
var buttonBorderRadius = Math.round(borderRadius * 1.05);
var containerRadius = Math.round(borderRadius * 0.8);
var chatRadius = Math.round(borderRadius * 0.6);
var formItemBorderRadius = Math.round(borderRadius * 0.4);
var formItemSmallBorderRadius = Math.round(borderRadius * 0.25);
var zIndexBase = 2147483600;
var bottomInfoOffset = 57 + buttonY;
if (buttonStyle === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_BOTTOM) {
bottomInfoOffset = buttonY + 15;
} else if (buttonStyle && buttonStyle.includes("CLASSIC")) {
bottomInfoOffset = buttonY;
} else if (buttonStyle === GleapFeedbackButtonManager.FEEDBACK_BUTTON_NONE) {
bottomInfoOffset = buttonY;
}
var colorStyleSheet = "\n .gleap-font, .gleap-font * {\n font-style: normal;\n font-variant-caps: normal;\n font-variant-ligatures: normal;\n font-variant-numeric: normal;\n font-variant-east-asian: normal;\n font-weight: normal;\n font-stretch: normal;\n font-size: 100%;\n line-height: 1;\n font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n }\n .gleap-input-highlight {\n box-shadow: 0 0 0 3px ".concat(primaryColor, " !important;\n }\n .gleap-frame-container {\n right: ").concat(buttonX, "px;\n bottom: ").concat(61 + buttonY, "px;\n width: calc(100% - 40px);\n max-width: 410px;\n position: fixed;\n z-index: ").concat(zIndexBase + 31, ";\n visibility: visible;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.16);\n border-radius: ").concat(containerRadius, "px;\n overflow: hidden;\n animation-duration: .3s;\n animation-fill-mode: both;\n animation-name: gleapFadeInUp;\n user-select: none;\n pointer-events: none;\n transition: max-width 0.3s ease-out;\n }\n\n .gleap-admin-highlight {\n box-shadow: 0px 0px 0px 4px red;\n }\n\n :root {\n --gleap-margin-top: 50px;\n }\n\n .gleap-tooltip-anchor {\n position: relative;\n display: inline-block;\n float: left;\n max-width: 0px;\n width: 17px;\n }\n\n .gleap-tooltip-hotspot {\n position: absolute;\n display: block;\n width: 17px;\n height: 17px;\n cursor: pointer;\n top: 0px;\n left: 0px;\n }\n\n @keyframes gleap-pulse {\n 0% {\n transform: scale(0);\n opacity: 0.25;\n }\n 45% {\n transform: scale(2.5);\n opacity: 0;\n }\n 100% {\n transform: scale(0);\n opacity: 0;\n }\n }\n\n .gleap-tooltip-hotspot-animation {\n position: absolute;\n border-radius: 17px;\n opacity: 0.25;\n display: block;\n width: 17px;\n height: 17px;\n cursor: pointer;\n top: 0px;\n left: 0px;\n animation: gleap-pulse 5s infinite;\n }\n\n .gleap-tooltip-hotspot svg {\n width: 17px;\n height: 17px;\n object-fit: contain;\n display: block;\n }\n\n .gleap-tooltip-inner {\n position: relative;\n overflow: visible;\n font-size: 14px;\n font-weight: normal;\n color: #000;\n line-height: 1.3;\n }\n\n .gleap-tooltip {\n position: absolute;\n background-color: #fff;\n color: #000;\n font-size: 15px;\n line-height: 18px;\n padding: 16px;\n padding-top: 8px;\n padding-bottom: 8px;\n border-radius: 4px;\n max-width: min(350px, 80vw);\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s, visibility 0.2s;\n z-index: ").concat(zIndexBase + 100, ";\n }\n\n .gleap-tooltip a {\n color: ").concat(primaryColor, ";\n text-decoration: underline;\n display: inline !important;\n margin: 0px !important;\n padding: 0px !important;\n word-break: break-word;\n }\n\n .gleap-tooltip ul {\n padding-left: 16px;\n }\n\n .gleap-tooltip b {\n font-weight: 600;\n }\n\n .gleap-tooltip h2 {\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin-top: 8px;\n margin-bottom: 8px;\n }\n\n .gleap-tooltip h3 {\n font-size: 16px;\n line-height: 18px;\n font-weight: 600;\n margin-top: 8px;\n margin-bottom: 8px;\n }\n\n .gleap-tooltip p {\n padding: 0px;\n margin-top: 8px;\n margin-bottom: 8px;\n }\n\n .gleap-tooltip img {\n max-width: 100%;\n max-height: 300px;\n width: 100%;\n height: auto;\n object-fit: cover;\n margin-top: 8px;\n margin-bottom: 8px;\n border-radius: 4px;\n }\n\n .gleap-tooltip iframe,\n .gleap-tooltip video {\n max-width: 100%;\n width: 100%;\n height: auto;\n min-height: 200px;\n display: block;\n border: none;\n outline: none;\n padding: 0px;\n margin-top: 8px;\n margin-bottom: 8px;\n border-radius: 4px;\n }\n\n .gleap-tooltip-arrow {\n position: absolute;\n width: 20px;\n height: 20px;\n }\n\n .gleap-tooltip-arrow svg {\n width: 20px;\n height: 20px;\n object-fit: contain;\n }\n\n .gleap-b-frame {\n width: 100%;\n height: 100%;\n border: none;\n pointer-events: auto;\n padding: 0px;\n margin: 0px;\n }\n\n .gleap-b-shown {\n transition: margin 0.3s ease-out;\n margin-top: var(--gleap-margin-top);\n position: relative;\n z-index: 10000;\n }\n\n .gleap-b-f {\n margin-top: 0px;\n }\n\n .gleap-b {\n display: none;\n position: absolute;\n top: calc(-1 * var(--gleap-margin-top));\n left: 0px;\n width: 100vw;\n height: var(--gleap-margin-top);\n z-index: ").concat(zIndexBase + 99, ";\n }\n\n @keyframes gleapSlideIn {\n from {\n top: calc(-1 * var(--gleap-margin-top));\n }\n to {\n top: 10px;\n }\n }\n\n .gleap-b-f .gleap-b {\n position: fixed;\n top: 10px;\n animation: gleapSlideIn .25s ease-out forwards;\n max-width: 800px;\n width: calc(100% - 20px);\n left: 50%;\n z-index: ").concat(zIndexBase + 99, ";\n transform: translateX(-50%);\n border-radius: ").concat(formItemBorderRadius, "px;\n overflow: hidden;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 5px 5px rgba(0, 0, 0, 0.05);\n }\n\n .gleap-b-shown .gleap-b {\n display: block;\n }\n\n .gleap-image-view {\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: ").concat(zIndexBase + 99, ";\n background-color: ").concat(contrastBackgroundColor, "cc;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .gleap-image-view-image {\n width: 90%;\n height: auto;\n max-width: 90%;\n max-height: 90%;\n object-fit: contain;\n }\n\n .gleap-image-view-close {\n position: fixed;\n top: 20px;\n right: 20px;\n width: 32px;\n height: 32px;\n opacity: 0.8;\n z-index: ").concat(zIndexBase + 140, ";\n box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.16);\n cursor: pointer;\n }\n\n .gleap-image-view-close:hover {\n opacity: 1;\n }\n\n .gleap-image-view-close svg path {\n fill: ").concat(backgroundColor, ";\n }\n\n [dir=rtl].gleap-frame-container {\n right: auto;\n left: ").concat(buttonX, "px;\n bottom: ").concat(61 + buttonY, "px;\n }\n\n .gleap-frame-container--loading iframe {\n opacity: 0;\n }\n\n .gleap-frame-container--loading::before {\n content: \" \";\n position: fixed;\n top: 0px;\n left: 0px;\n right: 0px;\n height: 100%;\n max-height: 380px;\n background: linear-gradient(\n 130deg,\n ").concat(headerDarkColor, " 0%,\n ").concat(headerColor, " 100%\n );\n }\n \n .gleap-frame-container--loading::after {\n content: \" \";\n position: fixed;\n top: 0px;\n left: 0px;\n right: 0px;\n height: 100%;\n height: 100%;\n max-height: 380px;\n background: linear-gradient(\n 180deg,\n transparent 60%,\n ").concat(backgroundColor, "1A 70%,\n ").concat(backgroundColor, " 100%\n );\n }\n\n .gleap-frame-container--loading-nogradient::before {\n max-height: 340px;\n background: ").concat(headerColor, " !important;\n }\n\n .gleap-frame-container--loading-nofade::after {\n display: none !important;\n }\n\n .gleap-frame-container--survey {\n bottom: ").concat(buttonY, "px !important;\n }\n\n .gleap-frame-container--extended {\n max-width: 690px !important;\n }\n\n .gleap-frame-container--survey-full {\n position: fixed;\n top: 0 !important;\n left: 0 !important;\n bottom: 0 !important;\n right: 0 !important;\n width: 100vw !important;\n max-width: 100vw !important;\n height: 100vh !important;\n background-color: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(6px);\n display: flex !important;\n justify-content: center !important;\n align-items: center !important;\n max-height: 100vh !important;\n border-radius: 0 !important;\n animation-name: none !important;\n }\n\n .gleap-frame-container--survey-full .gleap-frame-container-inner {\n max-width: 640px !important;\n width: calc(100% - 24px);\n border-radius: ").concat(containerRadius, "px;\n overflow: hidden;\n }\n\n .gleap-frame-container--classic {\n right: ").concat(buttonX, "px;\n bottom: ").concat(buttonY, "px;\n }\n\n [dir=rtl].gleap-frame-container--classic {\n right: auto;\n left: ").concat(buttonX, "px;\n bottom: ").concat(buttonY, "px;\n }\n\n .gleap-frame-container--no-button {\n bottom: ").concat(buttonY, "px;\n }\n\n [dir=rtl].gleap-frame-container--classic-left {\n bottom: ").concat(buttonY, "px;\n }\n\n .gleap-frame-container--classic-left {\n right: auto;\n left: ").concat(buttonX, "px;\n bottom: ").concat(buttonY, "px;\n }\n\n [dir=rtl].gleap-frame-container--classic-left {\n left: auto;\n right: ").concat(buttonX, "px;\n bottom: ").concat(buttonY, "px;\n }\n\n .gleap-frame-container--modern-left {\n right: auto;\n left: ").concat(buttonX, "px;\n bottom: ").concat(61 + buttonY, "px;\n }\n\n [dir=rtl].gleap-frame-container--modern-left {\n left: auto;\n right: ").concat(buttonX, "px;\n bottom: ").concat(61 + buttonY, "px;\n }\n\n .gleap-frame-container--animate {\n pointer-events: auto !important;\n }\n\n @keyframes gleapFadeInUp {\n from {\n opacity: 0;\n transform: translate3d(0, 100%, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n\n @keyframes gleapFadeInUpMobile {\n from {\n opacity: 0;\n transform: translate3d(0, 10%, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n }\n\n .gleap-notification-container {\n position: fixed;\n bottom: ").concat(bottomInfoOffset, "px;\n right: ").concat(buttonX, "px;\n z-index: ").concat(zIndexBase + 30, ";\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n width: 100%;\n max-width: min(340px, 80vw);\n }\n\n .gleap-notification-container--left {\n left: ").concat(4 + buttonX, "px;\n right: initial !important;\n }\n\n [dir=rtl].gleap-notification-container {\n left: ").concat(4 + buttonX, "px;\n right: initial !important;\n }\n\n [dir=rtl].gleap-notification-container--left {\n left: initial !important;\n right: ").concat(buttonX, "px !important;\n align-items: flex-start !important;\n }\n\n .gleap-notification-container--no-button {\n bottom: ").concat(buttonY, "px;\n }\n\n .gleap-notification-item {\n animation-duration: 0.7s;\n animation-fill-mode: both;\n animation-name: bbFadeInOpacity;\n }\n\n .gleap-notification-close {\n border-radius: 100%;\n width: 28px;\n height: 28px;\n background-color: ").concat(subTextColor, ";\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 8px;\n cursor: pointer;\n visibility: hidden;\n pointer-events: none;\n }\n\n .gleap-notification-container:hover .gleap-notification-close {\n visibility: visible;\n pointer-events: auto;\n animation-duration: 0.7s;\n animation-fill-mode: both;\n animation-name: bbFadeInOpacity;\n }\n\n @media only screen and (max-width: 450px) {\n .gleap-notification-close {\n visibility: visible;\n pointer-events: auto;\n animation-duration: 0.7s;\n animation-fill-mode: both;\n animation-name: bbFadeInOpacity;\n }\n }\n\n .gleap-notification-close svg {\n width: 45%;\n height: 45%;\n object-fit: contain;\n fill: ").concat(backgroundColor, ";\n }\n\n .gleap-notification-item-checklist-container {\n display: flex;\n animation: fadeIn;\n animation-duration: .45s;\n background-color: ").concat(backgroundColor, ";\n border-radius: ").concat(subTextColor, ";\n box-sizing: border-box;\n cursor: pointer;\n flex-direction: column;\n overflow: hidden;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);\n border-radius: ").concat(chatRadius, "px;\n margin-bottom: 12px;\n }\n\n .gleap-notification-item-checklist-content {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n padding: 15px;\n width: 100%;\n width: min(310px, 70vw);\n max-width: min(310px, 70vw);\n }\n\n .gleap-notification-item-checklist-content-title {\n color: ").concat(contrastBackgroundColor, ";\n font-size: 15px;\n font-weight: 500;\n line-height: 21px;\n margin-bottom: 10px;\n max-width: 100%;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .gleap-notification-item-checklist-content-progress {\n width: 100%;\n height: 8px;\n border-radius: 8px;\n background-color: ").concat(backgroundColorHover, ";\n }\n\n .gleap-notification-item-checklist-content-progress-inner {\n height: 100%;\n border-radius: 8px;\n background-color: ").concat(primaryColor, ";\n }\n\n .gleap-notification-item-checklist-content-next {\n color: ").concat(subTextColor, ";\n font-size: 15px;\n font-weight: normal;\n line-height: 21px;\n margin-top: 10px;\n max-width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n }\n\n .gleap-notification-item-checklist-content-next svg {\n height: 18px;\n margin-right: 5px;\n width: auto;\n }\n\n .gleap-notification-item-checklist-content-next b {\n font-size: 15px;\n font-weight: normal;\n color: ").concat(contrastBackgroundColor, ";\n }\n\n .gleap-notification-item-news {\n width: 100%;\n }\n\n .gleap-news-pagination {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 10px;\n width: 100%;\n }\n\n .gleap-news-page-indicator {\n font-size: 12px;\n color: ").concat(subTextColor, ";\n }\n\n .gleap-news-next-button {\n background-color: ").concat(primaryColor, ";\n color: ").concat(contrastColor, ";\n border-radius: ").concat(formItemSmallBorderRadius, "px;\n box-sizing: border-box;\n padding: 5px 10px;\n font-size: 14px;\n font-weight: bold;\n line-height: 21px;\n border: none;\n text-align: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: none !important;\n outline: none !important;^\n }\n\n .gleap-notification-item-news-content {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n padding: 15px;\n }\n\n .gleap-notification-item-news-preview {\n color: ").concat(subTextColor, ";\n font-size: 14px;\n line-height: 21px;\n font-weight: 400;\n overflow-wrap: break-word;\n word-break: break-word;\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .gleap-notification-item-news-sender {\n display: flex;\n align-items: center;\n color: ").concat(subTextColor, ";\n font-size: 15px;\n line-height: 21px;\n font-weight: 400;\n }\n \n .gleap-notification-item-news-content-title {\n color: ").concat(contrastBackgroundColor, ";\n font-size: 15px;\n font-weight: 500;\n line-height: 21px;\n margin-bottom: 6px;\n max-width: 100%;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n cursor: pointer;\n }\n\n .gleap-notification-item-news-sender img {\n border-radius: 100%;\n height: 20px;\n margin-right: 8px;\n object-fit: cover;\n width: 20px;\n }\n\n [dir=rtl] .gleap-notification-item-news-sender img {\n margin-left: 8px;\n margin-right: 0px !important;\n }\n\n .gleap-notification-item-news-container {\n display: flex;\n animation: fadeIn;\n animation-duration: .45s;\n background-color: ").concat(backgroundColor, ";\n border-radius: ").concat(subTextColor, ";\n box-sizing: border-box;\n flex-direction: column;\n overflow: hidden;\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);\n border-radius: ").concat(chatRadius, "px;\n margin-bottom: 12px;\n }\n\n .gleap-notification-item-news-image {\n background-color: ").concat(subTextColor, ";\n height: 170px;\n max-height: 170px;\n object-fit: cover;\n width: 100%;\n cursor: pointer;\n }\n \n .gleap-notification-item-news-content-title:hover {\n color: ").concat(primaryColor, ";\n }\n\n .gleap-notification-item {\n display: flex;\n align-items: flex-end;\n cursor: pointer;\n }\n\n .gleap-notification-item img {\n width: 32px;\n height: 32px;\n min-width: 32px;\n border-radius: 100%;\n object-fit: cover;\n margin-right: 8px;\n margin-bottom: 12px;\n cursor: pointer;\n }\n\n [dir=rtl] .gleap-notification-item img {\n margin-left: 8px;\n margin-right: 0px !important;\n }\n\n .gleap-notification-item-container {\n box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);\n border-radius: ").concat(chatRadius, "px;\n border-bottom-left-radius: 0px;\n padding: 20px;\n background-color: ").concat(backgroundColor, ";\n margin-bottom: 12px;\n cursor: pointer;\n font-size: 15px;\n line-height: 21px;\n color: ").concat(contrastBackgroundColor, ";\n position: relative;\n }\n\n .gleap-notification-item-container::after {\n content: \" \";\n position: absolute;\n bottom: 0px;\n width: 0px;\n height: 0px;\n left: -6px;\n border-style: solid;\n border-width: 0px 0px 10px 6px;\n