@ably/ui 16.0.0-dev.2051d9aa → 16.0.0-dev.308accbb

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/.DS_Store +0 -0
  3. package/core/Accordion/types.js.map +1 -1
  4. package/core/Accordion.js +1 -1
  5. package/core/Accordion.js.map +1 -1
  6. package/core/FeaturedLink.js +1 -1
  7. package/core/FeaturedLink.js.map +1 -1
  8. package/core/Flyout.js +1 -1
  9. package/core/Flyout.js.map +1 -1
  10. package/core/Footer/data.js +2 -0
  11. package/core/Footer/data.js.map +1 -0
  12. package/core/Footer.js +1 -1
  13. package/core/Footer.js.map +1 -1
  14. package/core/Header/HeaderLinks.js +1 -1
  15. package/core/Header/HeaderLinks.js.map +1 -1
  16. package/core/Header.js +1 -1
  17. package/core/Header.js.map +1 -1
  18. package/core/LegacyFooter/LegacyFooter.js +2 -0
  19. package/core/LegacyFooter/LegacyFooter.js.map +1 -0
  20. package/core/Meganav/MeganavMobile.js +1 -1
  21. package/core/Meganav/MeganavMobile.js.map +1 -1
  22. package/core/Meganav/MeganavPanel.js +1 -1
  23. package/core/Meganav/MeganavPanel.js.map +1 -1
  24. package/core/Meganav/data.js +1 -1
  25. package/core/Meganav/data.js.map +1 -1
  26. package/core/Meganav.js +1 -1
  27. package/core/Meganav.js.map +1 -1
  28. package/core/ProductTile/data.js +1 -1
  29. package/core/ProductTile/data.js.map +1 -1
  30. package/core/SegmentedControl.js +2 -0
  31. package/core/SegmentedControl.js.map +1 -0
  32. package/core/scripts.js +1 -1
  33. package/core/scripts.js.map +1 -1
  34. package/core/utils/heights.js +1 -1
  35. package/core/utils/heights.js.map +1 -1
  36. package/index.d.ts +92 -42
  37. package/package.json +3 -3
  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/Header/Header.css +0 -8
  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
  }
@@ -547,7 +554,6 @@ export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLin
547
554
 
548
555
  declare module '@ably/ui/core/Header' {
549
556
  import React, { ReactNode } from "react";
550
- import "@ably/ui/core/Header/Header.css";
551
557
  export type ThemedScrollpoint = {
552
558
  id: string;
553
559
  className: string;
@@ -589,7 +595,7 @@ export type HeaderProps = {
589
595
  /**
590
596
  * Indicates if the notice banner is visible.
591
597
  */
592
- isNoticeVisible: boolean;
598
+ isNoticeVisible?: boolean;
593
599
  /**
594
600
  * Optional search bar element.
595
601
  */
@@ -619,6 +625,10 @@ export type HeaderProps = {
619
625
  */
620
626
  external?: boolean;
621
627
  }[];
628
+ /**
629
+ * Optional classname for styling the header links container.
630
+ */
631
+ headerLinksClassName?: string;
622
632
  /**
623
633
  * Optional desktop navigation element.
624
634
  */
@@ -642,6 +652,10 @@ export type HeaderProps = {
642
652
  * - "mobile": Visible only on mobile devices.
643
653
  */
644
654
  searchButtonVisibility?: "all" | "desktop" | "mobile";
655
+ /**
656
+ * Optional location object to detect location changes.
657
+ */
658
+ location?: Location;
645
659
  };
646
660
  const Header: React.FC<HeaderProps>;
647
661
  export default Header;
@@ -694,6 +708,23 @@ export default Icon;
694
708
  //# sourceMappingURL=Icon.d.ts.map
695
709
  }
696
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
+
697
728
  declare module '@ably/ui/core/LegacyMeganav/LegacyMeganav' {
698
729
  import { ReactNode } from "react";
699
730
  import { ColorClass } from ".@ably/ui/core/styles/colors/types";
@@ -1091,8 +1122,8 @@ export default _default;
1091
1122
 
1092
1123
  declare module '@ably/ui/core/Meganav/MeganavMobile' {
1093
1124
  import { AccordionData } from ".@ably/ui/core/Accordion/types";
1094
- export const MeganavMobile: ({ mobileNavItems, }: {
1095
- mobileNavItems: AccordionData[];
1125
+ export const MeganavMobile: ({ navItems }: {
1126
+ navItems: AccordionData[];
1096
1127
  }) => import("react/jsx-runtime").JSX.Element;
1097
1128
  //# sourceMappingURL=MeganavMobile.d.ts.map
1098
1129
  }
@@ -1134,6 +1165,10 @@ export type MenuItem = {
1134
1165
  content?: React.ReactNode;
1135
1166
  panelClassName?: string;
1136
1167
  };
1168
+ export const ablyAwards: {
1169
+ image: string;
1170
+ desc: string;
1171
+ }[];
1137
1172
  export const menuItemLinks: {
1138
1173
  name: string;
1139
1174
  link: string;
@@ -1163,11 +1198,10 @@ export type MeganavNoticeBannerProps = {
1163
1198
  };
1164
1199
  export type MeganavProps = {
1165
1200
  sessionState: HeaderSessionState;
1166
- searchDataId: string;
1167
1201
  notice?: MeganavNoticeBannerProps;
1168
1202
  theme?: string;
1169
1203
  };
1170
- const Meganav: ({ sessionState, searchDataId, notice, theme, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
1204
+ const Meganav: ({ sessionState, notice, theme }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
1171
1205
  export default Meganav;
1172
1206
  //# sourceMappingURL=Meganav.d.ts.map
1173
1207
  }
@@ -1319,7 +1353,8 @@ export default ProductLabel;
1319
1353
 
1320
1354
  declare module '@ably/ui/core/ProductTile/data' {
1321
1355
  import { IconName } from ".@ably/ui/core/Icon/types";
1322
- export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
1356
+ export const productNames: readonly ["pubsub", "chat", "spaces", "liveSync", "assetTracking", "liveObjects"];
1357
+ export type ProductName = (typeof productNames)[number];
1323
1358
  type Products = Record<ProductName, {
1324
1359
  label: string;
1325
1360
  description: string;
@@ -1388,6 +1423,26 @@ export default ProductTile;
1388
1423
  //# sourceMappingURL=ProductTile.d.ts.map
1389
1424
  }
1390
1425
 
1426
+ declare module '@ably/ui/core/SegmentedControl' {
1427
+ import React, { PropsWithChildren } from "react";
1428
+ import type { IconName } from "@ably/ui/core/Icon/types";
1429
+ export type SegmentedControlSize = "md" | "sm" | "xs";
1430
+ export type SegmentedControlProps = {
1431
+ className?: string;
1432
+ rounded?: boolean;
1433
+ leftIcon?: IconName;
1434
+ rightIcon?: IconName;
1435
+ active?: boolean;
1436
+ variant?: "default" | "subtle" | "strong";
1437
+ size?: SegmentedControlSize;
1438
+ onClick?: () => void;
1439
+ disabled?: boolean;
1440
+ };
1441
+ const SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>>;
1442
+ export default SegmentedControl;
1443
+ //# sourceMappingURL=SegmentedControl.d.ts.map
1444
+ }
1445
+
1391
1446
  declare module '@ably/ui/core/Slider' {
1392
1447
  import { ReactNode } from "react";
1393
1448
  interface SliderProps {
@@ -1585,11 +1640,6 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
1585
1640
  //# sourceMappingURL=dom-query.d.ts.map
1586
1641
  }
1587
1642
 
1588
- declare module '@ably/ui/core/hubspot-chat-toggle' {
1589
- export default function toggleChatWidget(params: any): (() => void) | undefined;
1590
- //# sourceMappingURL=hubspot-chat-toggle.d.ts.map
1591
- }
1592
-
1593
1643
  declare module '@ably/ui/core/remote-blogs-posts' {
1594
1644
  export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
1595
1645
  export namespace reducerBlogPosts {
@@ -1704,7 +1754,7 @@ declare module '@ably/ui/core/utils/heights' {
1704
1754
  export const HEADER_HEIGHT = 64;
1705
1755
  export const HEADER_BOTTOM_MARGIN = 24;
1706
1756
  /**
1707
- * Calculates the maximum height for a component by subtracting the total of given heights from 100vh.
1757
+ * Calculates the maximum height for a component by subtracting the total of given heights from 100dvh.
1708
1758
  *
1709
1759
  * @param {...number} heights - An array of heights in pixels.
1710
1760
  * @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.2051d9aa",
3
+ "version": "16.0.0-dev.308accbb",
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"
@@ -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"}
@@ -1,8 +0,0 @@
1
- @supports (-webkit-touch-callout: none) {
2
- .mobile-menu-container {
3
- /* Only applies to iOS devices */
4
- padding-bottom: env(safe-area-inset-bottom, 0px);
5
- /* Or with existing margin */
6
- margin-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
7
- }
8
- }
@@ -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