@ably/ui 16.0.0-dev.639e8121 → 16.0.0-dev.667628d8

package/index.d.ts

@@ -25,6 +25,12 @@ export type AccordionData = {
      * @param index - The index of the clicked accordion item.
      */
     onClick?: (index: number) => void;
+    /**
+     * Indicates whether the accordion item is interactive.
+     * When false, the item cannot be expanded or collapsed by user interaction.
+     * @default true
+     */
+    interactive?: boolean;
 };
 export type AccordionIcons = {
     closed: {
@@ -306,15 +312,6 @@ export default ConnectStateWrapper;
 //# sourceMappingURL=ConnectStateWrapper.d.ts.map
 }
 
-declare module '@ably/ui/core/ContactFooter' {
-type ContactFooterProps = {
-    urlBase: string;
-};
-const ContactFooter: ({ urlBase }: ContactFooterProps) => import("react/jsx-runtime").JSX.Element;
-export default ContactFooter;
-//# sourceMappingURL=ContactFooter.d.ts.map
-}
-
 declare module '@ably/ui/core/CookieMessage' {
 type CookieMessageProps = {
     cookieId: string;
@@ -424,11 +421,11 @@ type FeaturedLinkProps = {
     onClick?: () => void;
     disabled?: boolean;
     /**
-     * Optional class name for group hover state.
+     * Optional class name for the icon.
      */
-    groupHoverClassName?: string;
+    iconClassName?: string;
 };
-const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled, groupHoverClassName, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
+const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled, iconClassName, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
 export default FeaturedLink;
 //# sourceMappingURL=FeaturedLink.d.ts.map
 }
@@ -511,29 +508,39 @@ type FlyoutProps = {
      * Optional class name for the viewport.
      */
     viewPortClassName?: string;
-    /**
-     * Flag to indicate if animation should be applied.
-     */
-    hasAnimation: boolean;
 };
-const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, hasAnimation, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
+const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
 export default Flyout;
 //# sourceMappingURL=Flyout.d.ts.map
 }
 
-declare module '@ably/ui/core/Footer' {
-type FooterProps = {
-    paths: {
-        ablyStack: string;
-        bestSupport: string;
-        highPerformer: string;
-        usersMostLikely: string;
-        bestMeetsRequirements: string;
-    };
-    urlBase: string;
-    statusUrl: string;
+declare module '@ably/ui/core/Footer/data' {
+import { IconName } from ".@ably/ui/core/Icon/types";
+type FooterLinksProps = {
+    title: string;
+    links: {
+        label: string;
+        link: string;
+        badge?: string;
+    }[];
 };
-const Footer: ({ paths, urlBase, statusUrl }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export const footerLinks: FooterLinksProps[];
+export const bottomFooterLinks: {
+    label: string;
+    link: string;
+}[];
+export const socialLinks: {
+    key: string;
+    colorIcon: IconName;
+    monoIcon: IconName;
+    link: string;
+}[];
+export {};
+//# sourceMappingURL=data.d.ts.map
+}
+
+declare module '@ably/ui/core/Footer' {
+const Footer: () => import("react/jsx-runtime").JSX.Element;
 export default Footer;
 //# sourceMappingURL=Footer.d.ts.map
 }
@@ -547,7 +554,6 @@ export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLin
 
 declare module '@ably/ui/core/Header' {
 import React, { ReactNode } from "react";
-import "@ably/ui/core/Header/Header.css";
 export type ThemedScrollpoint = {
     id: string;
     className: string;
@@ -589,7 +595,7 @@ export type HeaderProps = {
     /**
      * Indicates if the notice banner is visible.
      */
-    isNoticeVisible: boolean;
+    isNoticeVisible?: boolean;
     /**
      * Optional search bar element.
      */
@@ -619,6 +625,10 @@ export type HeaderProps = {
          */
         external?: boolean;
     }[];
+    /**
+     * Optional classname for styling the header links container.
+     */
+    headerLinksClassName?: string;
     /**
      * Optional desktop navigation element.
      */
@@ -642,6 +652,10 @@ export type HeaderProps = {
      * - "mobile": Visible only on mobile devices.
      */
     searchButtonVisibility?: "all" | "desktop" | "mobile";
+    /**
+     * Optional location object to detect location changes.
+     */
+    location?: Location;
 };
 const Header: React.FC<HeaderProps>;
 export default Header;
@@ -694,6 +708,23 @@ export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }
 
+declare module '@ably/ui/core/LegacyFooter/LegacyFooter' {
+type LegacyFooterProps = {
+    paths: {
+        ablyStack: string;
+        bestSupport: string;
+        highPerformer: string;
+        usersMostLikely: string;
+        bestMeetsRequirements: string;
+    };
+    urlBase: string;
+    statusUrl: string;
+};
+const LegacyFooter: ({ paths, urlBase, statusUrl }: LegacyFooterProps) => import("react/jsx-runtime").JSX.Element;
+export default LegacyFooter;
+//# sourceMappingURL=LegacyFooter.d.ts.map
+}
+
 declare module '@ably/ui/core/LegacyMeganav/LegacyMeganav' {
 import { ReactNode } from "react";
 import { ColorClass } from ".@ably/ui/core/styles/colors/types";
@@ -1091,8 +1122,8 @@ export default _default;
 
 declare module '@ably/ui/core/Meganav/MeganavMobile' {
 import { AccordionData } from ".@ably/ui/core/Accordion/types";
-export const MeganavMobile: ({ mobileNavItems, }: {
-    mobileNavItems: AccordionData[];
+export const MeganavMobile: ({ navItems }: {
+    navItems: AccordionData[];
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MeganavMobile.d.ts.map
 }
@@ -1111,6 +1142,15 @@ export const MeganavPanel: ({ displayProductTile, panelLeft, panelLeftClassName,
 //# sourceMappingURL=MeganavPanel.d.ts.map
 }
 
+declare module '@ably/ui/core/Meganav/MeganavProductTile' {
+import { ProductTileProps } from ".@ably/ui/core/ProductTile";
+const MeganavProductTile: ({ name, productLink, showDescription, showLabel, size, animateIcons, }: ProductTileProps & {
+    productLink?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MeganavProductTile;
+//# sourceMappingURL=MeganavProductTile.d.ts.map
+}
+
 declare module '@ably/ui/core/Meganav/data' {
 import React from "react";
 import { IconName } from ".@ably/ui/core/Icon/types";
@@ -1134,12 +1174,66 @@ export type MenuItem = {
     content?: React.ReactNode;
     panelClassName?: string;
 };
+export const ablyAwards: {
+    image: string;
+    desc: string;
+}[];
 export const menuItemLinks: {
     name: string;
     link: string;
     isHiddenMobile: boolean;
 }[];
 export const menuItemsForHeader: MenuItem[];
+export const productsForNav: {
+    pubsub: {
+        link: string;
+        label: string;
+        description: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    liveSync: {
+        link: string;
+        label: string;
+        description: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    chat: {
+        link: string;
+        label: string;
+        description: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    spaces: {
+        link: string;
+        label: string;
+        description: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    assetTracking: {
+        label: string;
+        description: string;
+        link?: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    liveObjects: {
+        label: string;
+        description: string;
+        link?: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+};
 //# sourceMappingURL=data.d.ts.map
 }
 
@@ -1163,10 +1257,10 @@ export type MeganavNoticeBannerProps = {
 };
 export type MeganavProps = {
     sessionState: HeaderSessionState;
-    searchDataId: string;
     notice?: MeganavNoticeBannerProps;
+    theme?: string;
 };
-const Meganav: ({ sessionState, searchDataId, notice }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+const Meganav: ({ sessionState, notice, theme }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
@@ -1318,7 +1412,8 @@ export default ProductLabel;
 
 declare module '@ably/ui/core/ProductTile/data' {
 import { IconName } from ".@ably/ui/core/Icon/types";
-export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
+export const productNames: readonly ["pubsub", "chat", "spaces", "liveSync", "assetTracking", "liveObjects"];
+export type ProductName = (typeof productNames)[number];
 type Products = Record<ProductName, {
     label: string;
     description: string;
@@ -1387,6 +1482,26 @@ export default ProductTile;
 //# sourceMappingURL=ProductTile.d.ts.map
 }
 
+declare module '@ably/ui/core/SegmentedControl' {
+import React, { PropsWithChildren } from "react";
+import type { IconName } from "@ably/ui/core/Icon/types";
+export type SegmentedControlSize = "md" | "sm" | "xs";
+export type SegmentedControlProps = {
+    className?: string;
+    rounded?: boolean;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+    active?: boolean;
+    variant?: "default" | "subtle" | "strong";
+    size?: SegmentedControlSize;
+    onClick?: () => void;
+    disabled?: boolean;
+};
+const SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>>;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.d.ts.map
+}
+
 declare module '@ably/ui/core/Slider' {
 import { ReactNode } from "react";
 interface SliderProps {
@@ -1584,11 +1699,6 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
-declare module '@ably/ui/core/hubspot-chat-toggle' {
-export default function toggleChatWidget(params: any): (() => void) | undefined;
-//# sourceMappingURL=hubspot-chat-toggle.d.ts.map
-}
-
 declare module '@ably/ui/core/remote-blogs-posts' {
 export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
 export namespace reducerBlogPosts {
@@ -1703,7 +1813,7 @@ declare module '@ably/ui/core/utils/heights' {
 export const HEADER_HEIGHT = 64;
 export const HEADER_BOTTOM_MARGIN = 24;
 /**
- * Calculates the maximum height for a component by subtracting the total of given heights from 100vh.
+ * Calculates the maximum height for a component by subtracting the total of given heights from 100dvh.
  *
  * @param {...number} heights - An array of heights in pixels.
  * @returns {string} The CSS calc expression for the maximum height.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "16.0.0-dev.639e8121",
+  "version": "16.0.0-dev.667628d8",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "http-server": "14.1.1",
     "jsdom": "^26.0.0",
     "mixpanel-browser": "^2.60.0",
-    "msw": "2.7.1",
+    "msw": "2.7.3",
     "msw-storybook-addon": "^2.0.2",
     "playwright": "^1.49.1",
     "posthog-js": "^1.217.4",
@@ -77,7 +77,7 @@
     "start": "vite --port 5000",
     "storybook": "yarn build && storybook dev -p 6006",
     "build-storybook": "yarn build && storybook build --quiet -o preview",
-    "test": "yarn test:storybook && yarn test:vitest",
+    "test": "yarn test:storybook && yarn test:vitest run",
     "test:storybook": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
     "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\"",
     "test:vitest": "vitest --environment=jsdom --dir=src"

package/core/ContactFooter/component.css

@@ -1,11 +0,0 @@
-@layer components {
-  .ui-contact-footer {
-    background-size: 100% 100%;
-    background-position: right center;
-    @apply w-full bg-gradient-active-orange;
-  }
-
-  .ui-contact-footer-box {
-    @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
-  }
-}

package/core/ContactFooter/component.js

@@ -1,2 +0,0 @@
-import toggleChatWidget from"../hubspot-chat-toggle";export default(()=>toggleChatWidget({dataId:"contact-footer"}));
-//# sourceMappingURL=component.js.map

package/core/ContactFooter/component.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/ContactFooter/component.js"],"sourcesContent":["import toggleChatWidget from \"../hubspot-chat-toggle\";\nexport default () => toggleChatWidget({ dataId: \"contact-footer\" });\n"],"names":["toggleChatWidget","dataId"],"mappings":"AAAA,OAAOA,qBAAsB,wBAAyB,AACtD,eAAe,CAAA,IAAMA,iBAAiB,CAAEC,OAAQ,gBAAiB,EAAC,CAAE"}

package/core/ContactFooter.js

@@ -1,2 +0,0 @@
-import React,{useEffect}from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import toggleChatWidget from"./hubspot-chat-toggle";const ContactFooter=({urlBase})=>{useEffect(()=>toggleChatWidget({dataId:"contact-footer"}),[]);const absUrl=path=>_absUrl(path,urlBase);return React.createElement("div",{className:"ui-contact-footer font-sans antialiased","data-id":"contact-footer"},React.createElement("div",{className:"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-live-chat",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Live Chat"),React.createElement("p",{className:"ui-text-p1"},"Reach out team of experts over chat powered by Ably.")),React.createElement("button",{type:"button",className:"ui-btn-secondary self-start mt-16",disabled:true,"data-id":"open-chat-widget","data-enabled-label":"Start a live chat","data-disabled-label":"Live chat unavailable"},"Live chat unavailable")),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-call-mobile",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",{className:"flex-grow"},React.createElement("div",{className:"ui-text-h3 mb-24"},"Call us"),React.createElement("p",{className:"ui-text-p1"},React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+1 877 434 5287")," (USA, toll free)"),React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+44 20 3318 4689")," (UK)")))),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-tech-account-comms",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Technical and account support"),React.createElement("p",{className:"ui-text-p1"},"We're standing by to help with any questions or code.")),React.createElement("a",{className:"ui-btn-secondary self-start p-btn mt-16",href:absUrl("/support")},"Get support now"))))};export default ContactFooter;
-//# sourceMappingURL=ContactFooter.js.map

package/core/ContactFooter.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/ContactFooter.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport Icon from \"./Icon\";\nimport _absUrl from \"./url-base.js\";\nimport toggleChatWidget from \"./hubspot-chat-toggle\";\n\ntype ContactFooterProps = {\n  urlBase: string;\n};\n\nconst ContactFooter = ({ urlBase }: ContactFooterProps) => {\n  useEffect(() => toggleChatWidget({ dataId: \"contact-footer\" }), []);\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  return (\n    <div\n      className=\"ui-contact-footer font-sans antialiased\"\n      data-id=\"contact-footer\"\n    >\n      <div className=\"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px\">\n        <div className=\"ui-contact-footer-box\">\n          <Icon\n            name=\"icon-display-live-chat\"\n            size=\"3rem\"\n            additionalCSS=\"block mb-16\"\n          />\n          <div>\n            <div className=\"ui-text-h3 mb-24\">Live Chat</div>\n            <p className=\"ui-text-p1\">\n              Reach out team of experts over chat powered by Ably.\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            className=\"ui-btn-secondary self-start mt-16\"\n            disabled\n            data-id=\"open-chat-widget\"\n            data-enabled-label=\"Start a live chat\"\n            data-disabled-label=\"Live chat unavailable\"\n          >\n            Live chat unavailable\n          </button>\n        </div>\n\n        <div className=\"ui-contact-footer-box\">\n          <Icon\n            name=\"icon-display-call-mobile\"\n            size=\"3rem\"\n            additionalCSS=\"block mb-16\"\n          />\n          <div className=\"flex-grow\">\n            <div className=\"ui-text-h3 mb-24\">Call us</div>\n            <p className=\"ui-text-p1\">\n              <span className=\"block\">\n                <strong className=\"font-bold\">+1 877 434 5287</strong> (USA,\n                toll free)\n              </span>\n              <span className=\"block\">\n                <strong className=\"font-bold\">+44 20 3318 4689</strong> (UK)\n              </span>\n            </p>\n          </div>\n        </div>\n\n        <div className=\"ui-contact-footer-box\">\n          <Icon\n            name=\"icon-display-tech-account-comms\"\n            size=\"3rem\"\n            additionalCSS=\"block mb-16\"\n          />\n          <div>\n            <div className=\"ui-text-h3 mb-24\">\n              Technical and account support\n            </div>\n            <p className=\"ui-text-p1\">\n              We&apos;re standing by to help with any questions or code.\n            </p>\n          </div>\n          <a\n            className=\"ui-btn-secondary self-start p-btn mt-16\"\n            href={absUrl(\"/support\")}\n          >\n            Get support now\n          </a>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ContactFooter;\n"],"names":["React","useEffect","Icon","_absUrl","toggleChatWidget","ContactFooter","urlBase","dataId","absUrl","path","div","className","data-id","name","size","additionalCSS","p","button","type","disabled","data-enabled-label","data-disabled-label","span","strong","a","href"],"mappings":"AAAA,OAAOA,OAASC,SAAS,KAAQ,OAAQ,AAEzC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,YAAa,eAAgB,AACpC,QAAOC,qBAAsB,uBAAwB,CAMrD,MAAMC,cAAgB,CAAC,CAAEC,OAAO,CAAsB,IACpDL,UAAU,IAAMG,iBAAiB,CAAEG,OAAQ,gBAAiB,GAAI,EAAE,EAClE,MAAMC,OAAS,AAACC,MAAiBN,QAAQM,KAAMH,SAE/C,OACE,oBAACI,OACCC,UAAU,0CACVC,UAAQ,kBAER,oBAACF,OAAIC,UAAU,qGACb,oBAACD,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,yBACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,WACC,oBAACA,OAAIC,UAAU,oBAAmB,aAClC,oBAACK,KAAEL,UAAU,cAAa,yDAI5B,oBAACM,UACCC,KAAK,SACLP,UAAU,oCACVQ,SAAAA,KACAP,UAAQ,mBACRQ,qBAAmB,oBACnBC,sBAAoB,yBACrB,0BAKH,oBAACX,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,2BACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,OAAIC,UAAU,aACb,oBAACD,OAAIC,UAAU,oBAAmB,WAClC,oBAACK,KAAEL,UAAU,cACX,oBAACW,QAAKX,UAAU,SACd,oBAACY,UAAOZ,UAAU,aAAY,mBAAwB,qBAGxD,oBAACW,QAAKX,UAAU,SACd,oBAACY,UAAOZ,UAAU,aAAY,oBAAyB,YAM/D,oBAACD,OAAIC,UAAU,yBACb,oBAACT,MACCW,KAAK,kCACLC,KAAK,OACLC,cAAc,gBAEhB,oBAACL,WACC,oBAACA,OAAIC,UAAU,oBAAmB,iCAGlC,oBAACK,KAAEL,UAAU,cAAa,0DAI5B,oBAACa,KACCb,UAAU,0CACVc,KAAMjB,OAAO,aACd,qBAOX,CAEA,gBAAeH,aAAc"}

package/core/Header/Header.css

@@ -1,8 +0,0 @@
-@supports (-webkit-touch-callout: none) {
-    .mobile-menu-container {
-        /* Only applies to iOS devices */
-        padding-bottom: env(safe-area-inset-bottom, 0px);
-        /* Or with existing margin */
-        margin-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
-    }
-}

package/core/hubspot-chat-toggle.js

@@ -1,2 +0,0 @@
-import{queryId}from"./dom-query";function enableBtn(el,text){el.disabled=false;el.innerText=text}function disableBtn(el,text){el.disabled=true;el.innerText=text}const WAIT_BETWEEN_RETRIES_MS=100;let MAX_RETRY_COUNT=30;export default function toggleChatWidget(params){const{dataId}=params??{};const container=queryId(dataId);const chatButton=queryId("open-chat-widget",container);const textEnabled=chatButton.dataset.enabledLabel;const textDisabled=chatButton.dataset.disabledLabel;if(!dataId||!container)return;const trigger=queryId("open-chat-widget",container);let clickHandler;const waitForScript=delay=>{const widget=window?.HubSpotConversations?.widget;const iframe=document.querySelector("#hubspot-messages-iframe-container");clickHandler=e=>{e.preventDefault();widget.open()};if(widget&&iframe){trigger.addEventListener("click",clickHandler);enableBtn(trigger,textEnabled)}else if(--MAX_RETRY_COUNT){setTimeout(()=>waitForScript(WAIT_BETWEEN_RETRIES_MS),delay)}};disableBtn(trigger,textDisabled);waitForScript(0);return()=>{disableBtn(trigger,textDisabled);trigger.removeEventListener("click",clickHandler)}}
-//# sourceMappingURL=hubspot-chat-toggle.js.map

package/core/hubspot-chat-toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/hubspot-chat-toggle.js"],"sourcesContent":["import { queryId } from \"./dom-query\";\n\n/*\n    A method to enable/disable a CTA that\n    is used to open the HubSpot chat widget\n\n    If the Chat widget is unavailable this script\n    will apply a disabled property and change\n    the text on the button, to warn the user.\n\n    Params:\n    - dataId        the parent container data-id\n\n*/\n\nfunction enableBtn(el, text) {\n  el.disabled = false;\n  el.innerText = text;\n}\n\nfunction disableBtn(el, text) {\n  el.disabled = true;\n  el.innerText = text;\n}\n\nconst WAIT_BETWEEN_RETRIES_MS = 100;\nlet MAX_RETRY_COUNT = 30;\n\nexport default function toggleChatWidget(params) {\n  const { dataId } = params ?? {};\n  const container = queryId(dataId);\n  const chatButton = queryId(\"open-chat-widget\", container);\n  const textEnabled = chatButton.dataset.enabledLabel;\n  const textDisabled = chatButton.dataset.disabledLabel;\n\n  if (!dataId || !container) return;\n  const trigger = queryId(\"open-chat-widget\", container);\n\n  let clickHandler;\n\n  const waitForScript = (delay) => {\n    const widget = window?.HubSpotConversations?.widget;\n\n    // If the chat is set to be hidden out of hours this will return null\n    const iframe = document.querySelector(\"#hubspot-messages-iframe-container\");\n\n    clickHandler = (e) => {\n      e.preventDefault();\n      widget.open();\n    };\n\n    if (widget && iframe) {\n      trigger.addEventListener(\"click\", clickHandler);\n      enableBtn(trigger, textEnabled);\n    } else if (--MAX_RETRY_COUNT) {\n      setTimeout(() => waitForScript(WAIT_BETWEEN_RETRIES_MS), delay);\n    }\n  };\n\n  disableBtn(trigger, textDisabled);\n  waitForScript(0);\n\n  return () => {\n    disableBtn(trigger, textDisabled);\n    trigger.removeEventListener(\"click\", clickHandler);\n  };\n}\n"],"names":["queryId","enableBtn","el","text","disabled","innerText","disableBtn","WAIT_BETWEEN_RETRIES_MS","MAX_RETRY_COUNT","toggleChatWidget","params","dataId","container","chatButton","textEnabled","dataset","enabledLabel","textDisabled","disabledLabel","trigger","clickHandler","waitForScript","delay","widget","window","HubSpotConversations","iframe","document","querySelector","e","preventDefault","open","addEventListener","setTimeout","removeEventListener"],"mappings":"AAAA,OAASA,OAAO,KAAQ,aAAc,CAetC,SAASC,UAAUC,EAAE,CAAEC,IAAI,EACzBD,GAAGE,QAAQ,CAAG,KACdF,CAAAA,GAAGG,SAAS,CAAGF,IACjB,CAEA,SAASG,WAAWJ,EAAE,CAAEC,IAAI,EAC1BD,GAAGE,QAAQ,CAAG,IACdF,CAAAA,GAAGG,SAAS,CAAGF,IACjB,CAEA,MAAMI,wBAA0B,IAChC,IAAIC,gBAAkB,EAEtB,gBAAe,SAASC,iBAAiBC,MAAM,EAC7C,KAAM,CAAEC,MAAM,CAAE,CAAGD,QAAU,CAAC,EAC9B,MAAME,UAAYZ,QAAQW,QAC1B,MAAME,WAAab,QAAQ,mBAAoBY,WAC/C,MAAME,YAAcD,WAAWE,OAAO,CAACC,YAAY,CACnD,MAAMC,aAAeJ,WAAWE,OAAO,CAACG,aAAa,CAErD,GAAI,CAACP,QAAU,CAACC,UAAW,OAC3B,MAAMO,QAAUnB,QAAQ,mBAAoBY,WAE5C,IAAIQ,aAEJ,MAAMC,cAAgB,AAACC,QACrB,MAAMC,OAASC,QAAQC,sBAAsBF,OAG7C,MAAMG,OAASC,SAASC,aAAa,CAAC,sCAEtCR,aAAe,AAACS,IACdA,EAAEC,cAAc,GAChBP,OAAOQ,IAAI,EACb,EAEA,GAAIR,QAAUG,OAAQ,CACpBP,QAAQa,gBAAgB,CAAC,QAASZ,cAClCnB,UAAUkB,QAASL,YACrB,MAAO,GAAI,EAAEN,gBAAiB,CAC5ByB,WAAW,IAAMZ,cAAcd,yBAA0Be,MAC3D,CACF,EAEAhB,WAAWa,QAASF,cACpBI,cAAc,GAEd,MAAO,KACLf,WAAWa,QAASF,cACpBE,QAAQe,mBAAmB,CAAC,QAASd,aACvC,CACF"}