@ably/ui 16.0.0-dev.fc84d6ff → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +1 -1
  2. package/core/Accordion/types.js.map +1 -1
  3. package/core/Accordion.js +1 -1
  4. package/core/Accordion.js.map +1 -1
  5. package/core/FeaturedLink.js +1 -1
  6. package/core/FeaturedLink.js.map +1 -1
  7. package/core/Flyout.js +1 -1
  8. package/core/Flyout.js.map +1 -1
  9. package/core/Footer/data.js +2 -0
  10. package/core/Footer/data.js.map +1 -0
  11. package/core/Footer.js +1 -1
  12. package/core/Footer.js.map +1 -1
  13. package/core/Header/HeaderLinks.js +1 -1
  14. package/core/Header/HeaderLinks.js.map +1 -1
  15. package/core/Header.js +1 -1
  16. package/core/Header.js.map +1 -1
  17. package/core/LegacyFooter/LegacyFooter.js +2 -0
  18. package/core/LegacyFooter/LegacyFooter.js.map +1 -0
  19. package/core/Meganav/MeganavMobile.js +1 -1
  20. package/core/Meganav/MeganavMobile.js.map +1 -1
  21. package/core/Meganav/MeganavPanel.js +1 -1
  22. package/core/Meganav/MeganavPanel.js.map +1 -1
  23. package/core/Meganav/data.js +1 -1
  24. package/core/Meganav/data.js.map +1 -1
  25. package/core/Meganav.js +1 -1
  26. package/core/Meganav.js.map +1 -1
  27. package/core/ProductTile/data.js +1 -1
  28. package/core/ProductTile/data.js.map +1 -1
  29. package/core/SegmentedControl.js +2 -0
  30. package/core/SegmentedControl.js.map +1 -0
  31. package/core/scripts.js +1 -1
  32. package/core/scripts.js.map +1 -1
  33. package/core/utils/heights.js +1 -1
  34. package/core/utils/heights.js.map +1 -1
  35. package/index.d.ts +146 -40
  36. package/package.json +3 -3
  37. package/core/.DS_Store +0 -0
  38. package/core/ContactFooter/component.css +0 -11
  39. package/core/ContactFooter/component.js +0 -2
  40. package/core/ContactFooter/component.js.map +0 -1
  41. package/core/ContactFooter.js +0 -2
  42. package/core/ContactFooter.js.map +0 -1
  43. package/core/Meganav/.DS_Store +0 -0
  44. package/core/hubspot-chat-toggle.js +0 -2
  45. package/core/hubspot-chat-toggle.js.map +0 -1
  46. /package/core/{Footer → LegacyFooter}/component.css +0 -0
package/index.d.ts CHANGED
@@ -25,6 +25,12 @@ export type AccordionData = {
25
25
  * @param index - The index of the clicked accordion item.
26
26
  */
27
27
  onClick?: (index: number) => void;
28
+ /**
29
+ * Indicates whether the accordion item is interactive.
30
+ * When false, the item cannot be expanded or collapsed by user interaction.
31
+ * @default true
32
+ */
33
+ interactive?: boolean;
28
34
  };
29
35
  export type AccordionIcons = {
30
36
  closed: {
@@ -306,15 +312,6 @@ export default ConnectStateWrapper;
306
312
  //# sourceMappingURL=ConnectStateWrapper.d.ts.map
307
313
  }
308
314
 
309
- declare module '@ably/ui/core/ContactFooter' {
310
- type ContactFooterProps = {
311
- urlBase: string;
312
- };
313
- const ContactFooter: ({ urlBase }: ContactFooterProps) => import("react/jsx-runtime").JSX.Element;
314
- export default ContactFooter;
315
- //# sourceMappingURL=ContactFooter.d.ts.map
316
- }
317
-
318
315
  declare module '@ably/ui/core/CookieMessage' {
319
316
  type CookieMessageProps = {
320
317
  cookieId: string;
@@ -424,11 +421,11 @@ type FeaturedLinkProps = {
424
421
  onClick?: () => void;
425
422
  disabled?: boolean;
426
423
  /**
427
- * Optional class name for group hover state.
424
+ * Optional class name for the icon.
428
425
  */
429
- groupHoverClassName?: string;
426
+ iconClassName?: string;
430
427
  };
431
- const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled, groupHoverClassName, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
428
+ const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled, iconClassName, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
432
429
  export default FeaturedLink;
433
430
  //# sourceMappingURL=FeaturedLink.d.ts.map
434
431
  }
@@ -511,29 +508,39 @@ type FlyoutProps = {
511
508
  * Optional class name for the viewport.
512
509
  */
513
510
  viewPortClassName?: string;
514
- /**
515
- * Flag to indicate if animation should be applied.
516
- */
517
- hasAnimation: boolean;
518
511
  };
519
- const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, hasAnimation, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
512
+ const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
520
513
  export default Flyout;
521
514
  //# sourceMappingURL=Flyout.d.ts.map
522
515
  }
523
516
 
524
- declare module '@ably/ui/core/Footer' {
525
- type FooterProps = {
526
- paths: {
527
- ablyStack: string;
528
- bestSupport: string;
529
- highPerformer: string;
530
- usersMostLikely: string;
531
- bestMeetsRequirements: string;
532
- };
533
- urlBase: string;
534
- statusUrl: string;
517
+ declare module '@ably/ui/core/Footer/data' {
518
+ import { IconName } from ".@ably/ui/core/Icon/types";
519
+ type FooterLinksProps = {
520
+ title: string;
521
+ links: {
522
+ label: string;
523
+ link: string;
524
+ badge?: string;
525
+ }[];
535
526
  };
536
- const Footer: ({ paths, urlBase, statusUrl }: FooterProps) => import("react/jsx-runtime").JSX.Element;
527
+ export const footerLinks: FooterLinksProps[];
528
+ export const bottomFooterLinks: {
529
+ label: string;
530
+ link: string;
531
+ }[];
532
+ export const socialLinks: {
533
+ key: string;
534
+ colorIcon: IconName;
535
+ monoIcon: IconName;
536
+ link: string;
537
+ }[];
538
+ export {};
539
+ //# sourceMappingURL=data.d.ts.map
540
+ }
541
+
542
+ declare module '@ably/ui/core/Footer' {
543
+ const Footer: () => import("react/jsx-runtime").JSX.Element;
537
544
  export default Footer;
538
545
  //# sourceMappingURL=Footer.d.ts.map
539
546
  }
@@ -585,6 +592,10 @@ export type HeaderProps = {
585
592
  * Optional classnames to add to the header
586
593
  */
587
594
  className?: string;
595
+ /**
596
+ * Indicates if the notice banner is visible.
597
+ */
598
+ isNoticeVisible?: boolean;
588
599
  /**
589
600
  * Optional search bar element.
590
601
  */
@@ -614,6 +625,10 @@ export type HeaderProps = {
614
625
  */
615
626
  external?: boolean;
616
627
  }[];
628
+ /**
629
+ * Optional classname for styling the header links container.
630
+ */
631
+ headerLinksClassName?: string;
617
632
  /**
618
633
  * Optional desktop navigation element.
619
634
  */
@@ -637,6 +652,10 @@ export type HeaderProps = {
637
652
  * - "mobile": Visible only on mobile devices.
638
653
  */
639
654
  searchButtonVisibility?: "all" | "desktop" | "mobile";
655
+ /**
656
+ * Optional location object to detect location changes.
657
+ */
658
+ location?: Location;
640
659
  };
641
660
  const Header: React.FC<HeaderProps>;
642
661
  export default Header;
@@ -689,6 +708,23 @@ export default Icon;
689
708
  //# sourceMappingURL=Icon.d.ts.map
690
709
  }
691
710
 
711
+ declare module '@ably/ui/core/LegacyFooter/LegacyFooter' {
712
+ type LegacyFooterProps = {
713
+ paths: {
714
+ ablyStack: string;
715
+ bestSupport: string;
716
+ highPerformer: string;
717
+ usersMostLikely: string;
718
+ bestMeetsRequirements: string;
719
+ };
720
+ urlBase: string;
721
+ statusUrl: string;
722
+ };
723
+ const LegacyFooter: ({ paths, urlBase, statusUrl }: LegacyFooterProps) => import("react/jsx-runtime").JSX.Element;
724
+ export default LegacyFooter;
725
+ //# sourceMappingURL=LegacyFooter.d.ts.map
726
+ }
727
+
692
728
  declare module '@ably/ui/core/LegacyMeganav/LegacyMeganav' {
693
729
  import { ReactNode } from "react";
694
730
  import { ColorClass } from ".@ably/ui/core/styles/colors/types";
@@ -1086,8 +1122,8 @@ export default _default;
1086
1122
 
1087
1123
  declare module '@ably/ui/core/Meganav/MeganavMobile' {
1088
1124
  import { AccordionData } from ".@ably/ui/core/Accordion/types";
1089
- export const MeganavMobile: ({ mobileNavItems, }: {
1090
- mobileNavItems: AccordionData[];
1125
+ export const MeganavMobile: ({ navItems }: {
1126
+ navItems: AccordionData[];
1091
1127
  }) => import("react/jsx-runtime").JSX.Element;
1092
1128
  //# sourceMappingURL=MeganavMobile.d.ts.map
1093
1129
  }
@@ -1129,12 +1165,66 @@ export type MenuItem = {
1129
1165
  content?: React.ReactNode;
1130
1166
  panelClassName?: string;
1131
1167
  };
1168
+ export const ablyAwards: {
1169
+ image: string;
1170
+ desc: string;
1171
+ }[];
1132
1172
  export const menuItemLinks: {
1133
1173
  name: string;
1134
1174
  link: string;
1135
1175
  isHiddenMobile: boolean;
1136
1176
  }[];
1137
1177
  export const menuItemsForHeader: MenuItem[];
1178
+ export const productsForNav: {
1179
+ pubsub: {
1180
+ link: string;
1181
+ label: string;
1182
+ description: string;
1183
+ icon?: IconName;
1184
+ hoverIcon?: IconName;
1185
+ unavailable?: boolean;
1186
+ };
1187
+ liveSync: {
1188
+ link: string;
1189
+ label: string;
1190
+ description: string;
1191
+ icon?: IconName;
1192
+ hoverIcon?: IconName;
1193
+ unavailable?: boolean;
1194
+ };
1195
+ chat: {
1196
+ link: string;
1197
+ label: string;
1198
+ description: string;
1199
+ icon?: IconName;
1200
+ hoverIcon?: IconName;
1201
+ unavailable?: boolean;
1202
+ };
1203
+ spaces: {
1204
+ link: string;
1205
+ label: string;
1206
+ description: string;
1207
+ icon?: IconName;
1208
+ hoverIcon?: IconName;
1209
+ unavailable?: boolean;
1210
+ };
1211
+ assetTracking: {
1212
+ label: string;
1213
+ description: string;
1214
+ link?: string;
1215
+ icon?: IconName;
1216
+ hoverIcon?: IconName;
1217
+ unavailable?: boolean;
1218
+ };
1219
+ liveObjects: {
1220
+ label: string;
1221
+ description: string;
1222
+ link?: string;
1223
+ icon?: IconName;
1224
+ hoverIcon?: IconName;
1225
+ unavailable?: boolean;
1226
+ };
1227
+ };
1138
1228
  //# sourceMappingURL=data.d.ts.map
1139
1229
  }
1140
1230
 
@@ -1158,10 +1248,10 @@ export type MeganavNoticeBannerProps = {
1158
1248
  };
1159
1249
  export type MeganavProps = {
1160
1250
  sessionState: HeaderSessionState;
1161
- searchDataId: string;
1162
1251
  notice?: MeganavNoticeBannerProps;
1252
+ theme?: string;
1163
1253
  };
1164
- const Meganav: ({ sessionState, searchDataId, notice }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
1254
+ const Meganav: ({ sessionState, notice, theme }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
1165
1255
  export default Meganav;
1166
1256
  //# sourceMappingURL=Meganav.d.ts.map
1167
1257
  }
@@ -1313,7 +1403,8 @@ export default ProductLabel;
1313
1403
 
1314
1404
  declare module '@ably/ui/core/ProductTile/data' {
1315
1405
  import { IconName } from ".@ably/ui/core/Icon/types";
1316
- export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
1406
+ export const productNames: readonly ["pubsub", "chat", "spaces", "liveSync", "assetTracking", "liveObjects"];
1407
+ export type ProductName = (typeof productNames)[number];
1317
1408
  type Products = Record<ProductName, {
1318
1409
  label: string;
1319
1410
  description: string;
@@ -1382,6 +1473,26 @@ export default ProductTile;
1382
1473
  //# sourceMappingURL=ProductTile.d.ts.map
1383
1474
  }
1384
1475
 
1476
+ declare module '@ably/ui/core/SegmentedControl' {
1477
+ import React, { PropsWithChildren } from "react";
1478
+ import type { IconName } from "@ably/ui/core/Icon/types";
1479
+ export type SegmentedControlSize = "md" | "sm" | "xs";
1480
+ export type SegmentedControlProps = {
1481
+ className?: string;
1482
+ rounded?: boolean;
1483
+ leftIcon?: IconName;
1484
+ rightIcon?: IconName;
1485
+ active?: boolean;
1486
+ variant?: "default" | "subtle" | "strong";
1487
+ size?: SegmentedControlSize;
1488
+ onClick?: () => void;
1489
+ disabled?: boolean;
1490
+ };
1491
+ const SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>>;
1492
+ export default SegmentedControl;
1493
+ //# sourceMappingURL=SegmentedControl.d.ts.map
1494
+ }
1495
+
1385
1496
  declare module '@ably/ui/core/Slider' {
1386
1497
  import { ReactNode } from "react";
1387
1498
  interface SliderProps {
@@ -1579,11 +1690,6 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
1579
1690
  //# sourceMappingURL=dom-query.d.ts.map
1580
1691
  }
1581
1692
 
1582
- declare module '@ably/ui/core/hubspot-chat-toggle' {
1583
- export default function toggleChatWidget(params: any): (() => void) | undefined;
1584
- //# sourceMappingURL=hubspot-chat-toggle.d.ts.map
1585
- }
1586
-
1587
1693
  declare module '@ably/ui/core/remote-blogs-posts' {
1588
1694
  export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
1589
1695
  export namespace reducerBlogPosts {
@@ -1698,7 +1804,7 @@ declare module '@ably/ui/core/utils/heights' {
1698
1804
  export const HEADER_HEIGHT = 64;
1699
1805
  export const HEADER_BOTTOM_MARGIN = 24;
1700
1806
  /**
1701
- * Calculates the maximum height for a component by subtracting the total of given heights from 100vh.
1807
+ * Calculates the maximum height for a component by subtracting the total of given heights from 100dvh.
1702
1808
  *
1703
1809
  * @param {...number} heights - An array of heights in pixels.
1704
1810
  * @returns {string} The CSS calc expression for the maximum height.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "16.0.0-dev.fc84d6ff",
3
+ "version": "16.0.0",
4
4
  "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.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -45,7 +45,7 @@
45
45
  "http-server": "14.1.1",
46
46
  "jsdom": "^26.0.0",
47
47
  "mixpanel-browser": "^2.60.0",
48
- "msw": "2.7.1",
48
+ "msw": "2.7.3",
49
49
  "msw-storybook-addon": "^2.0.2",
50
50
  "playwright": "^1.49.1",
51
51
  "posthog-js": "^1.217.4",
@@ -77,7 +77,7 @@
77
77
  "start": "vite --port 5000",
78
78
  "storybook": "yarn build && storybook dev -p 6006",
79
79
  "build-storybook": "yarn build && storybook build --quiet -o preview",
80
- "test": "yarn test:storybook && yarn test:vitest",
80
+ "test": "yarn test:storybook && yarn test:vitest run",
81
81
  "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\"",
82
82
  "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\"",
83
83
  "test:vitest": "vitest --environment=jsdom --dir=src"
package/core/.DS_Store DELETED
Binary file
@@ -1,11 +0,0 @@
1
- @layer components {
2
- .ui-contact-footer {
3
- background-size: 100% 100%;
4
- background-position: right center;
5
- @apply w-full bg-gradient-active-orange;
6
- }
7
-
8
- .ui-contact-footer-box {
9
- @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
10
- }
11
- }
@@ -1,2 +0,0 @@
1
- import toggleChatWidget from"../hubspot-chat-toggle";export default(()=>toggleChatWidget({dataId:"contact-footer"}));
2
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,2 +0,0 @@
1
- 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;
2
- //# sourceMappingURL=ContactFooter.js.map
@@ -1 +0,0 @@
1
- {"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"}
Binary file
@@ -1,2 +0,0 @@
1
- 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)}}
2
- //# sourceMappingURL=hubspot-chat-toggle.js.map
@@ -1 +0,0 @@
1
- {"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"}
File without changes