@zonos/elements 1.3.18-alpha.2 → 1.3.18-alpha.4

package/dist/components/zonos-hello.js

@@ -1,879 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
-import { v as handleFetch, l as logError, a as localizationStore, B as isValidSelector, D as getZCountryUrlParam, E as setZCountryUrlParam, d as log, F as currencyDisplay, G as currencyConvertAndFormat, H as currencyConvert, I as currencyFormat } from './stripe.js';
-import { a as translate } from './translationStore.js';
-import { c as classes } from './classes.js';
-import { g as getHasMoreSpaceOnRight, d as defineCustomElement$9 } from './zonos-hello-dialog2.js';
-import { d as defineCustomElement$f } from './zonos-banner2.js';
-import { d as defineCustomElement$e } from './zonos-button2.js';
-import { d as defineCustomElement$d } from './zonos-card2.js';
-import { d as defineCustomElement$c } from './zonos-country-flag2.js';
-import { d as defineCustomElement$b } from './zonos-country-select2.js';
-import { d as defineCustomElement$a } from './zonos-custom-message2.js';
-import { d as defineCustomElement$8 } from './zonos-hello-dialog-footer2.js';
-import { d as defineCustomElement$7 } from './zonos-icon2.js';
-import { d as defineCustomElement$6 } from './zonos-language-select2.js';
-import { d as defineCustomElement$5 } from './zonos-select-dialog-header2.js';
-import { d as defineCustomElement$4 } from './zonos-spinner2.js';
-import { d as defineCustomElement$3 } from './zonos-text2.js';
-import { d as defineCustomElement$2 } from './zonos-v-stack2.js';
-
-var root = _root;
-
-/**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
- *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
- */
-var now$1 = function() {
-  return root.Date.now();
-};
-
-var now_1 = now$1;
-
-/** Used to match a single whitespace character. */
-
-var reWhitespace = /\s/;
-
-/**
- * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
- * character of `string`.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {number} Returns the index of the last non-whitespace character.
- */
-function trimmedEndIndex$1(string) {
-  var index = string.length;
-
-  while (index-- && reWhitespace.test(string.charAt(index))) {}
-  return index;
-}
-
-var _trimmedEndIndex = trimmedEndIndex$1;
-
-var trimmedEndIndex = _trimmedEndIndex;
-
-/** Used to match leading whitespace. */
-var reTrimStart = /^\s+/;
-
-/**
- * The base implementation of `_.trim`.
- *
- * @private
- * @param {string} string The string to trim.
- * @returns {string} Returns the trimmed string.
- */
-function baseTrim$1(string) {
-  return string
-    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
-    : string;
-}
-
-var _baseTrim = baseTrim$1;
-
-var baseGetTag = _baseGetTag,
-    isObjectLike = isObjectLike_1;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol$1(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && baseGetTag(value) == symbolTag);
-}
-
-var isSymbol_1 = isSymbol$1;
-
-var baseTrim = _baseTrim,
-    isObject$1 = isObject_1,
-    isSymbol = isSymbol_1;
-
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
-
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
-
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
-
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber$1(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject$1(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject$1(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = baseTrim(value);
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
-}
-
-var toNumber_1 = toNumber$1;
-
-var isObject = isObject_1,
-    now = now_1,
-    toNumber = toNumber_1;
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max,
-    nativeMin = Math.min;
-
-/**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=false]
- *  Specify invoking on the leading edge of the timeout.
- * @param {number} [options.maxWait]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new debounced function.
- * @example
- *
- * // Avoid costly calculations while the window size is in flux.
- * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
- *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * jQuery(element).on('click', _.debounce(sendMail, 300, {
- *   'leading': true,
- *   'trailing': false
- * }));
- *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
- * var source = new EventSource('/stream');
- * jQuery(source).on('message', debounced);
- *
- * // Cancel the trailing debounced invocation.
- * jQuery(window).on('popstate', debounced.cancel);
- */
-function debounce(func, wait, options) {
-  var lastArgs,
-      lastThis,
-      maxWait,
-      result,
-      timerId,
-      lastCallTime,
-      lastInvokeTime = 0,
-      leading = false,
-      maxing = false,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-
-  function invokeFunc(time) {
-    var args = lastArgs,
-        thisArg = lastThis;
-
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime,
-        timeWaiting = wait - timeSinceLastCall;
-
-    return maxing
-      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
-      : timeWaiting;
-  }
-
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-  }
-
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
-  }
-
-  function debounced() {
-    var time = now(),
-        isInvoking = shouldInvoke(time);
-
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-
-var debounce_1 = debounce;
-
-const checkItemRestrictions = async ({ items, shipFrom, shipTo, }) => {
-    var _a;
-    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/check-item-restrictions`;
-    const body = {
-        items,
-        shipFrom,
-        shipTo,
-    };
-    const { errors, json } = await handleFetch(url, { body, method: 'POST' });
-    if (errors.length || !json) {
-        logError(`Error fetching item restrictions: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
-        return [];
-    }
-    return json.filter(Boolean);
-};
-
-const detectItemRestrictions = async (newProducts) => {
-    if (!newProducts.length) {
-        return [];
-    }
-    const { selectedCountryCode } = localizationStore;
-    if (!selectedCountryCode) {
-        logError('Hello Could not check item restrictions - No country code selected');
-        return [];
-    }
-    const items = newProducts.map(product => ({
-        description: product.description,
-        name: product.title,
-    }));
-    const restrictedItems = await checkItemRestrictions({
-        items: items,
-        shipFrom: 'AD',
-        shipTo: selectedCountryCode,
-    });
-    const restrictedItemsWithName = restrictedItems.map(item => {
-        var _a;
-        const name = ((_a = items.filter(x => x.description === item.itemDescription).find(Boolean)) === null || _a === void 0 ? void 0 : _a.name) || '';
-        return Object.assign(Object.assign({}, item), { name });
-    });
-    return restrictedItemsWithName;
-};
-
-const getCurrentHelloLocalePage = () => {
-    const { href } = window.location;
-    const { cartUrlPattern, homepageUrlPattern, productDetailUrlPattern, productListUrlPattern, } = zonosStore.helloSettings;
-    // The 'if' statements are sorted by most specific to least specific to help with regex matching
-    if (cartUrlPattern && new RegExp(cartUrlPattern).test(href)) {
-        return 'cart';
-    }
-    if (productDetailUrlPattern &&
-        new RegExp(productDetailUrlPattern).test(href)) {
-        return 'productDetail';
-    }
-    if (productListUrlPattern && new RegExp(productListUrlPattern).test(href)) {
-        return 'productList';
-    }
-    if (homepageUrlPattern && new RegExp(homepageUrlPattern).test(href)) {
-        return 'home';
-    }
-    return '';
-};
-
-const getProductsOnPage = () => {
-    var _a, _b;
-    const { productAddToCartElementSelector, productDescriptionElementSelector, productTitleElementSelector, restrictionBehavior, } = zonosStore.helloSettings;
-    if (!productTitleElementSelector || !productDescriptionElementSelector) {
-        logError(`Hello Could not check item restrictions - must provide title and description selectors.`);
-    }
-    const titleNodes = (productTitleElementSelector &&
-        isValidSelector(productTitleElementSelector) &&
-        document.querySelectorAll(productTitleElementSelector)) ||
-        [];
-    const descriptionNodes = (productDescriptionElementSelector &&
-        isValidSelector(productDescriptionElementSelector) &&
-        document.querySelectorAll(productDescriptionElementSelector)) ||
-        [];
-    if (titleNodes.length !== descriptionNodes.length) {
-        // If the title and description selectors don't match, kill item restrictions altogether
-        logError('Hello Could not check item restrictions - Title and description selectors do not match');
-        return [];
-    }
-    const shouldDisableCart = restrictionBehavior === 'RESTRICT_AND_BLOCK';
-    const cartButtonNodes = (shouldDisableCart &&
-        productAddToCartElementSelector &&
-        isValidSelector(productAddToCartElementSelector) &&
-        document.querySelectorAll(productAddToCartElementSelector)) ||
-        [];
-    if (shouldDisableCart && cartButtonNodes.length !== descriptionNodes.length) {
-        // If the "add to cart" selectors don't match, log the error and continue
-        logError('Hello could not disable "Add to cart" buttons - Title and add to cart selectors do not match');
-    }
-    const mergedElements = [];
-    for (let i = 0; i < titleNodes.length; i++) {
-        const titleNode = titleNodes[i];
-        const descriptionNode = descriptionNodes[i];
-        const cartButtonNode = cartButtonNodes[i];
-        if (titleNode && descriptionNode) {
-            const element = {
-                cartButtonNode: cartButtonNode || null,
-                description: ((_a = descriptionNode.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
-                title: ((_b = titleNode.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '',
-            };
-            mergedElements.push(element);
-        }
-    }
-    return mergedElements;
-};
-
-const zonosHelloCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:inline-block}:host .zonos--hello-wrapper{position:relative}:host .zonos--hello-wrapper .zonos--hello-dialog-wrapper-mobile-override{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}@media (max-width: 768px){:host .zonos--hello-wrapper{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}}:host .zonos--hello-widget{-webkit-transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);padding:6px;border-radius:30px;background:var(--zonos-elements-page-background);font-size:var(--zonos-elements-font-size-s);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;z-index:1000}:host .zonos--hello-widget>.zonos--hello-message{-ms-flex-order:0;order:0;max-width:0;height:100%;white-space:nowrap;-webkit-transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);overflow:hidden;color:var(--zonos-elements-text-color);position:absolute;background:var(--zonos-elements-page-background);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-top-left-radius:30px;border-bottom-left-radius:30px;left:0;-webkit-transform:translateX(calc(-100% + 16px));transform:translateX(calc(-100% + 16px));width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-top:var(--zonos-elements-border);border-bottom:var(--zonos-elements-border)}:host .zonos--hello-widget.zonos--hello-has-restrictions{background:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host .zonos--hello-widget.zonos--hello-has-restrictions>.zonos--hello-message{background:var(--zonos-elements-red-100);color:var(--zonos-elements-red-800);font-weight:500}:host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:1px solid var(--zonos-elements-red-200)}:host .zonos--hello-widget.zonos--hello-show-peek-message{max-width:100vw;width:100%}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{max-width:100vw;padding:0 6px;padding-right:16px;border:var(--zonos-elements-border)}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:0;border-bottom-left-radius:0}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left)>.zonos--hello-message{border-right:none}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:0;border-bottom-right-radius:0}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{border-left:0}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:16px;padding-right:6px;border-left:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-ms-flex-order:1;order:1;-webkit-transform:translateX(calc(100% - 16px));transform:translateX(calc(100% - 16px));right:0;left:auto;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:30px;border-bottom-right-radius:30px}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center}@media (max-width: 768px){:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{border-radius:var(--zonos-elements-radius-4);width:24px}}@media (max-width: 768px){:host .zonos--hello-widget{position:fixed;bottom:32px;right:32px;border-radius:var(--zonos-elements-radius-4);padding:4px;border:1px solid transparent}:host .zonos--hello-widget.zonos--hello-widget-left{left:32px;right:auto}:host .zonos--hello-widget.zonos--hello-widget-top{bottom:auto;top:32px}:host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:none}:host .zonos--hello-widget>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-widget.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:var(--zonos-elements-radius-4);border-bottom-left-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:var(--zonos-elements-radius-4);border-bottom-right-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:8px;padding-right:4px}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--zonos-elements-radius-4);padding-right:6px;border:none}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{border-radius:var(--zonos-elements-radius-4)}}:host .zonos--hello-mobile-override.zonos--hello-widget{position:fixed;bottom:32px;right:32px;border-radius:var(--zonos-elements-radius-4);padding:4px;border:1px solid transparent}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-left{left:32px;right:auto}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-top{bottom:auto;top:32px}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:none}:host .zonos--hello-mobile-override.zonos--hello-widget>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:var(--zonos-elements-radius-4);border-bottom-left-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:var(--zonos-elements-radius-4);border-bottom-right-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:8px;padding-right:4px}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--zonos-elements-radius-4);padding-right:6px;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag-wrapper{border-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag{border-radius:var(--zonos-elements-radius-4);width:24px}";
-const ZonosHelloStyle0 = zonosHelloCss;
-
-const PEEK_MESSAGE_CLOSE_DELAY_MS = 3000;
-const RESIZE_DEBOUNCE_DELAY_MS = 500;
-const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.getHelloPeekMessage = (organizationName) => {
-            const isRestrictionPage = zonosStore.currentHelloPage === 'productDetail' ||
-                zonosStore.currentHelloPage === 'productList';
-            if (isRestrictionPage && this.allRestrictedItems.length) {
-                const clickMessage = translate('click to learn more');
-                const restrictMessage = zonosStore.currentHelloPage === 'productDetail'
-                    ? translate('Restricted item')
-                    : translate('Restricted items found');
-                return `${restrictMessage} - ${clickMessage}`;
-            }
-            switch (zonosStore.currentHelloPage) {
-                case 'cart':
-                    return translate(`Prepay duties and taxes at checkout`);
-                case 'productList':
-                case 'productDetail':
-                    return translate(`See duty and tax thresholds`);
-                default:
-                    return `${translate('Welcome to')} ${organizationName}`;
-            }
-        };
-        this.enableShowPeekMessage = () => {
-            if (this.peekMessage) {
-                this.showPeekMessage = true;
-            }
-        };
-        this.getNewItemRestrictions = async (newProducts) => {
-            const isRestrictionPage = zonosStore.currentHelloPage === 'productDetail' ||
-                zonosStore.currentHelloPage === 'productList';
-            // Only run detectItemRestrictions on product pages if the restrictionBehavior is not DISABLED
-            if (!isRestrictionPage ||
-                zonosStore.helloSettings.restrictionBehavior === 'DISABLED') {
-                return [];
-            }
-            const newRestrictions = await detectItemRestrictions(newProducts);
-            return newRestrictions;
-        };
-        this.triggerShowPeekMessage = () => {
-            this.peekMessage = this.getHelloPeekMessage(zonosStore.organizationName);
-            const { peekMessageBehavior, peekMessageDelay } = zonosStore.helloSettings;
-            // peek message delay is passed in seconds, but setTimeout expects milliseconds
-            const peekMessageDelayToUse = peekMessageDelay * 1000;
-            if (peekMessageBehavior === 'ENABLED') {
-                setTimeout(() => {
-                    this.enableShowPeekMessage();
-                    const hasRestrictions = this.allRestrictedItems.some(item => this.productsOnPage.some(product => product.description === item.itemDescription));
-                    if (!hasRestrictions) {
-                        // If restrictions, persist the message until they hover over the hello widget
-                        setTimeout(() => {
-                            this.showPeekMessage = false;
-                        }, PEEK_MESSAGE_CLOSE_DELAY_MS);
-                    }
-                }, peekMessageDelayToUse);
-            }
-        };
-        this.disableAddToCartButtons = () => {
-            // Remove disabled attribute from all "add to cart" buttons
-            if (this.productsOnPage.length) {
-                this.productsOnPage.forEach(product => {
-                    var _a, _b;
-                    const isRestricted = this.allRestrictedItems.some(item => item.itemDescription === product.description);
-                    // if a product description matches a restrictedItems itemDescription, then disable the add to cart button. Otherwise, enable it.
-                    if (isRestricted) {
-                        (_a = product.cartButtonNode) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'disabled');
-                    }
-                    else {
-                        (_b = product.cartButtonNode) === null || _b === void 0 ? void 0 : _b.removeAttribute('disabled');
-                    }
-                });
-            }
-        };
-        this.handleItemRestrictions = async () => {
-            this.productsOnPage = getProductsOnPage();
-            const newProducts = this.productsOnPage.filter(product => !this.allFoundProducts.some(foundProduct => foundProduct.title === product.title));
-            const newRestrictions = await this.getNewItemRestrictions(newProducts);
-            this.allRestrictedItems.push(...newRestrictions);
-            this.allFoundProducts.push(...newProducts);
-            this.disableAddToCartButtons();
-        };
-        this.reloadHelloData = async () => {
-            await this.handleItemRestrictions();
-            this.triggerShowPeekMessage();
-        };
-        this.handleProductCountChange = debounce_1(() => {
-            const { productTitleElementSelector } = zonosStore.helloSettings;
-            if (productTitleElementSelector) {
-                const allProductsOnPage = getProductsOnPage();
-                if (this.allFoundProducts.length !== allProductsOnPage.length &&
-                    window.location.href === this.initialUrl) {
-                    // if allFoundProducts length is 0 (first render or no products), kill item restriction process as initial restrictions are handled in updateHelloOnPageChange
-                    if (!this.allFoundProducts.length) {
-                        return;
-                    }
-                    void this.reloadHelloData();
-                }
-            }
-        }, 1000);
-        this.watchProductCountChange = () => {
-            const observer = new MutationObserver(this.handleProductCountChange);
-            observer.observe(document.body, {
-                childList: true,
-                subtree: true,
-            });
-        };
-        this.watchPriceChange = () => {
-            const observer = new MutationObserver(() => void this.displayCurrency());
-            observer.observe(document.body, {
-                attributes: true,
-                childList: true,
-                subtree: true,
-            });
-        };
-        this.updateHelloOnPageChange = () => {
-            // If the product count changes on the same url (loading more products), update the peek message and item restrictions
-            this.watchProductCountChange();
-            // Check url change on interval. If changed, update the peek message and item restrictions
-            setInterval(() => {
-                if (window.location.href !== this.initialUrl) {
-                    const prevUrl = this.initialUrl && new URL(this.initialUrl);
-                    const initialZonosCountry = prevUrl && getZCountryUrlParam(prevUrl.searchParams);
-                    // If the zCountry url param changes, reset current item restriction tracking
-                    if (initialZonosCountry !== localizationStore.selectedCountryCode) {
-                        this.allFoundProducts = [];
-                        this.allRestrictedItems = [];
-                        this.productsOnPage = [];
-                    }
-                    this.initialUrl = window.location.href;
-                    zonosStore.currentHelloPage = getCurrentHelloLocalePage();
-                    const currentUrl = new URL(window.location.href);
-                    const zCountry = getZCountryUrlParam(currentUrl.searchParams);
-                    if (!zCountry) {
-                        setZCountryUrlParam(localizationStore.selectedCountryCode);
-                        return;
-                    }
-                    void this.reloadHelloData();
-                }
-            }, 1000);
-        };
-        this.changeShowDialog = (value) => {
-            this.showDialog = value;
-        };
-        this.shouldAnimateLeftDesktop = () => {
-            // Get Hello position (relative = desktop, fixed = mobile)
-            const elPosition = this.helloRef && getComputedStyle(this.helloRef).position;
-            // If relative position, determine if peek message should animate left or right. Mobile is pre-determined.
-            if (this.helloRef && elPosition === 'relative') {
-                const hasMoreSpaceOnRight = getHasMoreSpaceOnRight(this.helloRef);
-                return hasMoreSpaceOnRight;
-            }
-        };
-        this.isShippableCountry = (showLog = true) => {
-            if (!localizationStore.localizationLoaded) {
-                return false;
-            }
-            // if localization is loaded and the localization is not a shippable country, keep the original click event
-            if (!localizationStore.isShippableCountry) {
-                if (showLog) {
-                    log(`Hello: not shippable country`);
-                }
-                return false;
-            }
-            return true;
-        };
-        this.mobileLocationOverride = undefined;
-        this.animateFromLeftOverride = undefined;
-        this.appearanceSettingsOverride = undefined;
-        this.showPeekMessage = false;
-        this.zonosStoreHelloSettings = zonosStore.helloSettings;
-        this.showDialog = false;
-        this.peekMessage = '';
-        this.initialUrl = '';
-        this.allRestrictedItems = [];
-        this.allFoundProducts = [];
-        this.productsOnPage = [];
-    }
-    componentWillLoad() {
-        const initInterval = setInterval(async () => {
-            if (!this.helloRef) {
-                return;
-            }
-            if (zonosStore.loadedConfig) {
-                this.helloRef.setAttribute('data-zonos-hello-loaded', '');
-                this.updateHelloOnPageChange();
-                this.watchPriceChange();
-                // update theme to browser preference theme if appearance theme is system
-                this.handleAppearanceSettingsOverrideChange();
-                clearInterval(initInterval);
-            }
-        }, 100);
-    }
-    /**
-     * This method will trigger the currency conversion and display the converted value
-     * @returns void
-     */
-    async displayCurrency() {
-        if (!localizationStore.exchangeRate) {
-            logError('Could not display currency. Exchange rate and format data is not available.');
-            return;
-        }
-        currencyDisplay();
-    }
-    /**
-     * This method will call convert and format, and return the converted and formatted string
-     * @returns string
-     */
-    async convertAndFormat(value) {
-        return currencyConvertAndFormat(value);
-    }
-    /**
-     * This method will convert the currency and return the converted value
-     * @returns number
-     */
-    async convert(value) {
-        return currencyConvert(value);
-    }
-    /**
-     * This method will format the currency and return the formatted string
-     * @returns number
-     */
-    async format(value) {
-        return currencyFormat(value);
-    }
-    /**
-     * This method show the hello dialog
-     * @returns void
-     */
-    async openHelloDialog(value) {
-        this.changeShowDialog(value);
-    }
-    handleResize() {
-        debounce_1(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
-    }
-    handleAppearanceSettingsOverrideChange() {
-        var _a;
-        if ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) {
-            // update theme to browser preference theme if appearance theme is system
-            this.appearanceSettingsOverride.theme = getZonosStoreTheme(this.appearanceSettingsOverride.theme);
-        }
-    }
-    render() {
-        var _a, _b;
-        const isExcludedUrl = (_a = zonosStore.helloSettings.excludedUrlPatterns) === null || _a === void 0 ? void 0 : _a.some(pattern => new RegExp(pattern).test(window.location.href));
-        if (isExcludedUrl) {
-            log('Hello is excluded on this url', 'warn');
-            return null;
-        }
-        const { selectedCountryCode } = localizationStore;
-        const mobileLocation = this.mobileLocationOverride || zonosStore.helloSettings.mobileLocation;
-        const isMobileWindow = window.innerWidth < 768;
-        const isOnLeft = this.animateFromLeftOverride ||
-            (isMobileWindow && mobileLocation.includes('LEFT')) ||
-            this.shouldAnimateLeftDesktop() ||
-            false;
-        const isOnTop = mobileLocation.includes('TOP');
-        const appearanceSettings = mergeConfig(zonosStore.appearance, this.appearanceSettingsOverride);
-        const { theme } = appearanceSettings;
-        const restrictedItemsOnPage = (_b = this.allRestrictedItems) === null || _b === void 0 ? void 0 : _b.filter(product => this.productsOnPage.some(restriction => restriction.description === product.itemDescription));
-        // The  organization name can be changed after init with the updateOrganizationName method.
-        // This will cause the element to rerender with the new org name when it changes. (used for preview on dashboard)
-        this.peekMessage = this.getHelloPeekMessage(zonosStore.organizationName);
-        const showHello = this.isShippableCountry() && !!selectedCountryCode;
-        return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, showHello && (h("div", { class: "zonos--hello-wrapper" }, h("button", { class: classes([
-                'zonos--hello-widget',
-                this.showPeekMessage && 'zonos--hello-show-peek-message',
-                this.mobileLocationOverride && 'zonos--hello-mobile-override',
-                isOnLeft &&
-                    'zonos--hello-widget-left zonos--hello-widget-animate-from-left',
-                isOnTop && 'zonos--hello-widget-top',
-                !!this.allRestrictedItems.length &&
-                    'zonos--hello-has-restrictions',
-            ]), onClick: () => {
-                void this.changeShowDialog(!this.showDialog);
-            }, onMouseEnter: () => this.enableShowPeekMessage(), onMouseLeave: () => (this.showPeekMessage = false), ref: el => el && (this.helloRef = el) }, h("zonos-text", { class: "zonos--hello-message" }, this.peekMessage), selectedCountryCode && (h("div", { class: "zonos--hello-country-flag-wrapper" }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode })))), h("div", { class: classes([
-                'zonos--hello-dialog-wrapper',
-                this.mobileLocationOverride &&
-                    'zonos--hello-dialog-wrapper-mobile-override',
-            ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, h("zonos-hello-dialog", { animateFromLeftOverride: this.animateFromLeftOverride, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
-    }
-    static get watchers() { return {
-        "appearanceSettingsOverride": ["handleAppearanceSettingsOverrideChange"]
-    }; }
-    static get style() { return ZonosHelloStyle0; }
-}, [1, "zonos-hello", {
-        "mobileLocationOverride": [1, "mobile-location-override"],
-        "animateFromLeftOverride": [4, "animate-from-left-override"],
-        "appearanceSettingsOverride": [16],
-        "showPeekMessage": [32],
-        "zonosStoreHelloSettings": [32],
-        "showDialog": [32],
-        "peekMessage": [32],
-        "initialUrl": [32],
-        "allRestrictedItems": [32],
-        "allFoundProducts": [32],
-        "productsOnPage": [32],
-        "displayCurrency": [64],
-        "convertAndFormat": [64],
-        "convert": [64],
-        "format": [64],
-        "openHelloDialog": [64]
-    }, [[9, "resize", "handleResize"]], {
-        "appearanceSettingsOverride": ["handleAppearanceSettingsOverrideChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-hello", "zonos-banner", "zonos-button", "zonos-card", "zonos-country-flag", "zonos-country-select", "zonos-custom-message", "zonos-hello-dialog", "zonos-hello-dialog-footer", "zonos-icon", "zonos-language-select", "zonos-select-dialog-header", "zonos-spinner", "zonos-text", "zonos-v-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-hello":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosHello$1);
-            }
-            break;
-        case "zonos-banner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "zonos-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "zonos-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "zonos-country-flag":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "zonos-country-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "zonos-custom-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "zonos-hello-dialog":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "zonos-hello-dialog-footer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "zonos-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "zonos-language-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "zonos-select-dialog-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "zonos-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "zonos-v-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZonosHello = ZonosHello$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosHello, defineCustomElement };