@royaloperahouse/chord 0.7.31 → 0.7.34

package/dist/chord.esm.js

@@ -3554,7 +3554,7 @@ var NavTop = function NavTop(_ref) {
 
 var _templateObject$s, _templateObject2$c, _templateObject3$6, _templateObject4$3;
 var TabsContainer = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n"])));
-var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n\n  @media ", " {\n    column-gap: 15px;\n  }\n\n  @media ", " {\n    ", "\n  }\n"])), devices.desktop, devices.mobileAndTablet, function (props) {
+var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n\n  @media ", ", ", " {\n    column-gap: 15px;\n\n    div:last-child > div {\n      right: 1px;\n    }\n  }\n\n  @media ", " {\n    ", "\n  }\n"])), devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
   if (props.showMenu) {
     return "\n          display: flex;\n          flex-direction: column;\n          row-gap: 32px;\n        ";
   }
@@ -4413,6 +4413,48 @@ var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_temp
 var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 12 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n"])));
 
+var TEXT_STYLE_HTML_TAGS_REGEXP = '<em>|</em>|<b>|</b>';
+
+var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
+  return htmlString.replace(/<[^>]*>/g, '');
+};
+
+var insertString = function insertString(mainString, str, position) {
+  return "" + mainString.substring(0, position) + str + mainString.substring(position);
+};
+
+var insertHtmlTags = function insertHtmlTags(strWithTags, strWithoutTags, resultLength) {
+  var htmlTagPositions = Array.from(strWithTags.matchAll(new RegExp(TEXT_STYLE_HTML_TAGS_REGEXP, 'g')));
+  var tagsLength = 0;
+  var resultString = strWithoutTags;
+  htmlTagPositions.forEach(function (tag) {
+    resultString = insertString(resultString, tag[0], tag.index);
+    if (tag.index - tagsLength <= resultLength) tagsLength += tag[0].length;
+  });
+  return {
+    stringWithInsertedTags: resultString,
+    tagsLength: tagsLength
+  };
+};
+
+var truncateHtmlString = function truncateHtmlString(str, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
+
+  var strWithoutTags = stripAllHtmlTags(str);
+  if (strWithoutTags.length <= resultLength) return str;
+
+  var _insertHtmlTags = insertHtmlTags(str, strWithoutTags, resultLength),
+      stringWithInsertedTags = _insertHtmlTags.stringWithInsertedTags,
+      tagsLength = _insertHtmlTags.tagsLength;
+
+  var truncatedString = stringWithInsertedTags.substring(0, resultLength + tagsLength);
+  var isSpaceNext = strWithoutTags[resultLength] === ' ';
+  if (!isSpaceNext) truncatedString = truncatedString.substring(0, truncatedString.lastIndexOf(' '));
+  return addDots ? truncatedString + "..." : truncatedString;
+};
+
 var _excluded$8 = ["text"];
 
 var HighlightsCarousel = function HighlightsCarousel(_ref) {
@@ -4444,7 +4486,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   var linkText = link.text,
       restLink = _objectWithoutPropertiesLoose(link, _excluded$8);
 
-  var description = infoText == null ? void 0 : infoText.substring(0, 130);
+  var description = infoText ? truncateHtmlString(infoText, 185, true) : '';
   useEffect(function () {
     var slideChangeHandler = function slideChangeHandler(s) {
       return setCurrentSlide(s.realIndex);
@@ -4639,6 +4681,52 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message)));
 };
 
+var SCRIPT_SRC = 'https://talkdeskchatsdk.talkdeskapp.com/talkdeskchatsdk.js?t=';
+var THEME_COLOR = core.colors.core;
+var DATA_BIND = '5ea4b1ad-1a17-11ec-af32-06f09e0065e0';
+var DATA_ORG = '';
+var DIV_ID = 'tdWebchat';
+var THEME_ICON = 'https://static.roh.org.uk/images/logo-crest.png';
+var SCRIPT_CONTENT = "var webchat;\n((window, document, node, props, configs) => {\n  if (window.TalkdeskChatSDK) {\n    console.error(\"TalkdeskChatSDK already included\");\n    return;\n  }\n  var divContainer = document.createElement(\"div\");\n  divContainer.id = node;\n  document.body.appendChild(divContainer);\n  var currentDate = new Date().getTime();\n  var src = \"" + SCRIPT_SRC + "\" + currentDate;\n  var script = document.createElement(\"script\");\n  var firstScriptTag = document.getElementsByTagName(\"script\")[0];\n  script.type = \"text/javascript\";\n  script.charset = \"UTF-8\";\n  script.id = \"tdwebchatscript\";\n  script.src = src;\n  script.async = true;\n  firstScriptTag.parentNode.insertBefore(script, firstScriptTag);\n  script.onload = () => {\n    webchat = TalkdeskChatSDK(node, props);\n    webchat.init(configs);\n  };\n})(\n  window,\n  document,\n  \"" + DIV_ID + "\",\n  { flowId: \"cd19d348b5fb4a0ab0d3277686f28d1e\", accountId: \"\", region: \"td-us-1\" },\n  { enableEmoji: true, enableUserInput: true, styles :{\n    \"chatThemeColor\": \"" + THEME_COLOR + "\",\n    \"chatTitleIcon\": \"" + THEME_ICON + "\"\n  }}\n);";
+
+var loadLiveChatScript = function loadLiveChatScript(callback) {
+  var existingScript = document.getElementById(DIV_ID);
+
+  if (!existingScript) {
+    var liveChatDiv = document.createElement('div');
+    liveChatDiv.id = DIV_ID;
+    liveChatDiv.setAttribute('data-bind', DATA_BIND);
+    liveChatDiv.setAttribute('data-org', DATA_ORG);
+    var script = document.createElement('script');
+    var scriptBody = document.createTextNode(SCRIPT_CONTENT);
+    script.appendChild(scriptBody);
+    document.body.appendChild(liveChatDiv);
+    document.body.appendChild(script);
+
+    script.onload = function () {
+      if (callback) callback();
+    };
+  }
+
+  if (existingScript && callback) callback();
+};
+
+var LiveChat = function LiveChat() {
+  // eslint-disable-next-line
+  var _React$useState = useState(false),
+      loaded = _React$useState[0],
+      setLoaded = _React$useState[1];
+
+  useEffect(function () {
+    loadLiveChatScript(function () {
+      setLoaded(true);
+    });
+  });
+  return /*#__PURE__*/createElement("span", {
+    "data-loaded": loaded
+  });
+};
+
 var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
 var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 var LineContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
@@ -4880,6 +4968,7 @@ var Card = function Card(_ref) {
       hovered = _useState[0],
       setHovered = _useState[1];
 
+  var truncatedText = truncateHtmlString(text, 185, true);
   var primaryButton = links == null ? void 0 : links[0];
 
   var _ref2 = primaryButton || {},
@@ -4944,7 +5033,7 @@ var Card = function Card(_ref) {
     level: 6
   }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
     dangerouslySetInnerHTML: {
-      __html: truncate(text, 130)
+      __html: truncatedText
     }
   })), links ? /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,
@@ -6470,5 +6559,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$R || (_templat
   return theme.fonts.tablet.sizes.body[1];
 }, devices.desktop, devices.largeDesktop);
 
-export { Accordion, Accordions, AltHeader, AnchorTapBar, AnnouncementBanner, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, Quote, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
+export { Accordion, Accordions, AltHeader, AnchorTapBar, AnnouncementBanner, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, Quote, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
 //# sourceMappingURL=chord.esm.js.map