@telia-ace/knowledge-widget-components-guide 1.0.5 → 1.0.9

package/dist/guide.js

@@ -0,0 +1,917 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { ContactList, contactLink } from "@telia-ace/knowledge-widget-adapters";
+import { NotFound, Component } from "@telia-ace/knowledge-widget-types-grid";
+import { List, TextLink, paddedBorderTabStyle, useRouteData, Feedback as Feedback$1, StyledHeaderText, useDispatch, useProperties, Text, SymbolBadge, useContainer, Tooltip, StyledListButton, DropdownList, useFavorites, StyledText, FavoriteButton, DrawerList, DrawerAnimationType, useChildren, createEmptyComponent, guideRenderInstructions, Loader, loadingOpacity, Paragraph, genericHtml, headingElement, DialogList, contentBox, Metadata, Button, linkTabStyle } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames, buildCategoryTrail, createParams } from "@telia-ace/widget-utilities";
+import React, { useMemo, useState, useEffect, useCallback, forwardRef } from "react";
+import styled, { css } from "styled-components";
+import { PickerTypes } from "@telia-ace/knowledge-widget-core";
+const AnswerVersionPicker = ({
+  className,
+  defaultAnswerVersionLabel,
+  guide: { perspective: selectedPerspective, perspectives: guidePerspectives },
+  availablePerspectives = []
+}) => {
+  const { name, params } = useRouteData();
+  const perspectives = useMemo(() => {
+    if (!guidePerspectives || !availablePerspectives.length) {
+      return [];
+    }
+    return availablePerspectives.filter(({ name: name2 }) => !!guidePerspectives[name2]).map(({ name: name2, title }) => {
+      return { label: title, connection: guidePerspectives[name2] };
+    });
+  }, [guidePerspectives, availablePerspectives]);
+  return /* @__PURE__ */ React.createElement(StyledList, {
+    className: appendClassNames(className, "humany-guide-answer-version-picker"),
+    items: perspectives,
+    renderItem: (perspective) => {
+      const label = perspective.label === "Default" ? defaultAnswerVersionLabel : perspective.label;
+      const selected = selectedPerspective === perspective.connection;
+      const isRoot = selected && (!params.connection || selectedPerspective === params.connection);
+      return /* @__PURE__ */ React.createElement("li", {
+        key: perspective.connection,
+        "data-version": perspective.connection
+      }, /* @__PURE__ */ React.createElement(VersionLink, {
+        key: perspective.connection,
+        forwardedAs: isRoot ? "span" : void 0,
+        text: label,
+        routeName: name,
+        selected,
+        "aria-label": label,
+        title: label,
+        params: __spreadProps(__spreadValues({}, params), {
+          connection: perspective.connection
+        })
+      }));
+    }
+  });
+};
+const StyledList = styled(List)`
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li:not(:last-child) {
+        margin: 0 calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} * 2) 0 0;
+    }
+
+    li > span {
+        cursor: default;
+    }
+`;
+const VersionLink = styled(TextLink)`
+    font-weight: 300;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    text-decoration: none;
+
+    ${(p) => p.selected && css`
+            font-weight: bold;
+            text-decoration: underline;
+        `}
+
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && paddedBorderTabStyle;
+}};
+    }
+`;
+const StyledContactList$1 = styled(ContactList)`
+    border-top: ${(p) => p.theme.border};
+    ${(p) => p.backButtonShown === "true" && `border-bottom: ${p.theme.border};`}
+`;
+const StyledFeedback = styled(Feedback$1)`
+    ${(p) => {
+  var _a, _b;
+  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.large} ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
+}}
+`;
+const Recognition = styled(StyledHeaderText)`
+    ${(p) => {
+  var _a, _b;
+  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.large} ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
+}}
+
+    display: block;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    font-weight: bold;
+`;
+const Feedback = ({ backButtonShown = false, accordion = false }) => {
+  const dispatch = useDispatch();
+  const {
+    loading = false,
+    dialog = [],
+    guide,
+    handoverContactMethods = [],
+    contactHeader,
+    showFeedback,
+    feedbackDirection = "horizontal",
+    feedbackRecognitionLabel,
+    feedbackGiven,
+    feedbackHeader,
+    positiveFeedbackLabel,
+    negativeFeedbackLabel,
+    contactFeedbackLabel
+  } = useProperties();
+  if (!showFeedback || !guide || !guide.allowFeedback || loading && !feedbackGiven || dialog.length) {
+    return null;
+  }
+  if (feedbackGiven && feedbackRecognitionLabel && !handoverContactMethods.length) {
+    return /* @__PURE__ */ React.createElement(Recognition, {
+      accordion: accordion ? "true" : "false"
+    }, feedbackRecognitionLabel);
+  }
+  return guide.hasHandover && handoverContactMethods.length ? /* @__PURE__ */ React.createElement(StyledContactList$1, {
+    backButtonShown: backButtonShown ? "true" : "false",
+    accordion: accordion ? "true" : "false",
+    header: contactHeader,
+    contactMethods: handoverContactMethods,
+    dispatch
+  }) : /* @__PURE__ */ React.createElement(StyledFeedback, {
+    accordion: accordion ? "true" : "false",
+    positive: positiveFeedbackLabel,
+    negative: guide.hasHandover ? contactFeedbackLabel : negativeFeedbackLabel,
+    header: feedbackHeader,
+    selected: feedbackGiven,
+    onFeedback: (feedback) => dispatch("feedback", feedback),
+    direction: feedbackDirection
+  });
+};
+const Categories = ({
+  guide: { categories = [] },
+  toolbar: { picker = PickerTypes.NONE }
+}) => {
+  const [trail, setTrail] = useState([]);
+  const container = useContainer();
+  useEffect(() => {
+    buildCategoryTrail("index", categories.map((id) => id.toString()), container).then((result) => {
+      setTrail(result);
+    });
+  }, [categories]);
+  if (!trail.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Tooltip, {
+    className: "humany-guide-category-tooltip",
+    sticky: picker === PickerTypes.DRAWER,
+    content: /* @__PURE__ */ React.createElement(React.Fragment, null, trail.map((segments) => {
+      return /* @__PURE__ */ React.createElement(CategoryTrail, {
+        className: "humany-guide-category-trail",
+        key: segments.map((c) => c.id).join(".")
+      }, segments.map((category, index) => {
+        return /* @__PURE__ */ React.createElement(Text, {
+          className: "humany-guide-category-trail-segment",
+          key: category.id
+        }, category.symbol && index === 0 && /* @__PURE__ */ React.createElement(SymbolBadge, {
+          size: 14,
+          symbol: category.symbol
+        }), category.title, index !== segments.length - 1 && /* @__PURE__ */ React.createElement(CategorySeparator, {
+          className: "humany-category-separator"
+        }, "/"));
+      }));
+    }))
+  }, picker === PickerTypes.DRAWER ? /* @__PURE__ */ React.createElement(StyledListButton, {
+    className: "humany-guide-category-tooltip-button",
+    "data-has-label": "false",
+    "data-has-symbol": "true"
+  }, /* @__PURE__ */ React.createElement(CategoriesSymbolBadge, {
+    size: 19,
+    symbol: { type: "Svg", content: "information" }
+  })) : /* @__PURE__ */ React.createElement(CategoriesSymbolBadge, {
+    size: 19,
+    symbol: { type: "Svg", content: "information" }
+  }));
+};
+const CategoryTrail = styled.div`
+    i,
+    svg {
+        margin: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} 0 0;
+    }
+
+    &:not(:last-child) {
+        margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    }
+`;
+const CategorySeparator = styled(Text)`
+    margin: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+`;
+const CategoriesSymbolBadge = styled(SymbolBadge)`
+    display: block;
+`;
+const Functions = ({
+  header,
+  tooltip,
+  printActionLabel,
+  copyActionLabel,
+  addFavoriteTooltip,
+  removeFavoriteCancelLabel,
+  removeFavoriteConfirmLabel,
+  removeFavoriteHeader,
+  removeFavoriteLabel,
+  removeFavoriteTooltip,
+  toolbarFunctionsCloseButtonAriaLabel,
+  allowCopy = false,
+  allowPrint = false,
+  showFavoriteToggle = false,
+  picker = PickerTypes.NONE,
+  guide,
+  dispatch
+}) => {
+  const [favorites, actions] = useFavorites();
+  const handleCopy = useCallback((event) => {
+    if (guide) {
+      dispatch("copy", guide);
+    }
+  }, [guide, dispatch]);
+  const handlePrint = useCallback(() => {
+    if (guide) {
+      dispatch("print");
+    }
+  }, [guide, dispatch]);
+  const items = useMemo(() => {
+    const { id, title } = guide;
+    const items2 = [];
+    if (allowCopy) {
+      items2.push({
+        type: "copy",
+        child: /* @__PURE__ */ React.createElement(StyledListButton, {
+          "data-has-label": copyActionLabel ? "true" : "false",
+          "data-has-symbol": "true",
+          title: copyActionLabel,
+          "aria-label": printActionLabel,
+          onClick: handleCopy
+        }, /* @__PURE__ */ React.createElement(ColoredSymbolBadge$1, {
+          size: 16,
+          symbol: { type: "Svg", content: "copy" }
+        }), copyActionLabel && /* @__PURE__ */ React.createElement(StyledText, null, copyActionLabel))
+      });
+    }
+    if (allowPrint) {
+      items2.push({
+        type: "print",
+        child: /* @__PURE__ */ React.createElement(StyledListButton, {
+          "data-has-label": printActionLabel ? "true" : "false",
+          "data-has-symbol": "true",
+          title: printActionLabel,
+          "aria-label": printActionLabel,
+          onClick: handlePrint
+        }, /* @__PURE__ */ React.createElement(ColoredSymbolBadge$1, {
+          size: 16,
+          symbol: { type: "Svg", content: "print" }
+        }), printActionLabel && /* @__PURE__ */ React.createElement(StyledText, null, printActionLabel))
+      });
+    }
+    if (showFavoriteToggle) {
+      const isFavorite = favorites.indexOf(id) > -1;
+      items2.push({
+        type: "favorite",
+        child: /* @__PURE__ */ React.createElement(FavoriteButton, {
+          id,
+          guideTitle: title,
+          isFavorite,
+          buttonLabel: isFavorite ? removeFavoriteTooltip : addFavoriteTooltip,
+          addFavoriteTooltip,
+          removeFavoriteCancelLabel,
+          removeFavoriteConfirmLabel,
+          removeFavoriteHeader,
+          removeFavoriteLabel,
+          removeFavoriteTooltip,
+          actions
+        })
+      });
+    }
+    return items2;
+  }, [
+    favorites,
+    guide,
+    allowCopy,
+    allowPrint,
+    showFavoriteToggle,
+    printActionLabel,
+    copyActionLabel,
+    addFavoriteTooltip,
+    removeFavoriteCancelLabel,
+    removeFavoriteConfirmLabel,
+    removeFavoriteHeader,
+    removeFavoriteLabel,
+    removeFavoriteTooltip
+  ]);
+  if (!items.length) {
+    return null;
+  }
+  const trigger = /* @__PURE__ */ React.createElement(StyledTriggerButton, {
+    tabIndex: 0,
+    title: tooltip,
+    "data-has-symbol": "true",
+    "data-has-label": "false"
+  }, /* @__PURE__ */ React.createElement(ColoredSymbolBadge$1, {
+    symbol: { type: "Svg", content: "options" },
+    size: 18
+  }));
+  const renderListItem = ({ type, child }) => {
+    return /* @__PURE__ */ React.createElement("li", {
+      key: type,
+      "data-function-type": type
+    }, child);
+  };
+  if (picker === PickerTypes.DROPDOWN) {
+    return /* @__PURE__ */ React.createElement(StyledDropdownList$1, {
+      className: "humany-guide-functions-dropdown-list",
+      header,
+      items,
+      trigger,
+      renderItem: renderListItem,
+      closeButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel
+    });
+  }
+  if (picker === PickerTypes.DRAWER) {
+    return /* @__PURE__ */ React.createElement(DrawerList, {
+      className: "humany-guide-functions-drawer-list",
+      animation: { type: DrawerAnimationType.SlideInBottom },
+      header,
+      items,
+      trigger,
+      renderItem: renderListItem,
+      closeButtonAriaLabel: toolbarFunctionsCloseButtonAriaLabel
+    });
+  }
+  return null;
+};
+const ColoredSymbolBadge$1 = styled(SymbolBadge)`
+    circle {
+        fill: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+
+    line,
+    path,
+    rect {
+        stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+`;
+const StyledDropdownList$1 = styled(DropdownList)`
+    display: block;
+    min-height: auto;
+`;
+const StyledTriggerButton = styled(StyledListButton)`
+    padding: calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} * 2) 0;
+`;
+const getCurrentLanguageLabel = (guide, languages) => {
+  var _a;
+  return ((_a = languages.find((l) => l.id === guide.id)) == null ? void 0 : _a.label) || "";
+};
+const Languages = (_a) => {
+  var _b = _a, {
+    header,
+    tooltip,
+    picker = PickerTypes.NONE,
+    guide
+  } = _b, other = __objRest(_b, [
+    "header",
+    "tooltip",
+    "picker",
+    "guide"
+  ]);
+  const { name, params } = useRouteData();
+  const items = useMemo(() => {
+    return Object.keys(guide.translations || {}).reduce((acc, key) => {
+      const item = {};
+      item.key = key;
+      item.id = (guide.translations || {})[key];
+      item.label = other[`${key}LanguageLabel`];
+      if (item.id || item.label) {
+        acc.push(item);
+      }
+      return acc;
+    }, []);
+  }, [guide, other]);
+  if (!items.length) {
+    return null;
+  }
+  const currentLanguage = getCurrentLanguageLabel(guide, items);
+  const trigger = /* @__PURE__ */ React.createElement(Trigger, {
+    tabIndex: 0,
+    title: tooltip,
+    "data-has-symbol": "true",
+    "data-has-label": picker === PickerTypes.DROPDOWN && currentLanguage ? "true" : "false"
+  }, picker === PickerTypes.DROPDOWN && /* @__PURE__ */ React.createElement(React.Fragment, null, currentLanguage && /* @__PURE__ */ React.createElement(LanguageButtonText, null, currentLanguage), /* @__PURE__ */ React.createElement(LanguageCaretSymbolBadge, {
+    symbol: { type: "Svg", content: "caret-down" },
+    size: 11
+  })), picker === PickerTypes.DRAWER && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ColoredSymbolBadge, {
+    symbol: { type: "Svg", content: "language" },
+    size: 20
+  })));
+  const renderListItem = ({ label, key, id }) => {
+    return /* @__PURE__ */ React.createElement("li", {
+      key,
+      "data-language": key
+    }, /* @__PURE__ */ React.createElement(LanguageLink, {
+      tabIndex: 0,
+      text: label,
+      routeName: name,
+      selected: guide.id === id,
+      params: createParams(__spreadProps(__spreadValues({}, params), {
+        connection: void 0,
+        guide: id
+      }))
+    }));
+  };
+  if (picker === PickerTypes.DROPDOWN) {
+    return /* @__PURE__ */ React.createElement(StyledDropdownList, {
+      className: "humany-guide-languages-dropdown-list",
+      header,
+      items,
+      trigger,
+      renderItem: renderListItem
+    });
+  }
+  if (picker === PickerTypes.DRAWER) {
+    return /* @__PURE__ */ React.createElement(DrawerList, {
+      className: "humany-guide-languages-drawer-list",
+      animation: { type: DrawerAnimationType.SlideInBottom },
+      header,
+      items,
+      trigger,
+      renderItem: renderListItem
+    });
+  }
+  return null;
+};
+const Trigger = styled(StyledListButton)`
+    &&& {
+        margin: 0 ${(p) => {
+  var _a;
+  return `calc(${(_a = p.theme.sizes) == null ? void 0 : _a.small} * 2)`;
+}} 0 0;
+    }
+`;
+const ColoredSymbolBadge = styled(SymbolBadge)`
+    circle {
+        fill: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+
+    line,
+    path,
+    rect {
+        stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+`;
+const LanguageButtonText = styled(Text)`
+    margin: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} 0 0;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+`;
+const LanguageCaretSymbolBadge = styled(SymbolBadge)`
+    align-self: flex-end;
+    stroke-width: 2px;
+    stroke-linecap: round;
+
+    && {
+        width: 0.6em;
+        height: 1em;
+    }
+    line {
+        stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+`;
+const StyledDropdownList = styled(DropdownList)`
+    display: block;
+    min-height: auto;
+`;
+const LanguageLink = styled(TextLink)`
+    color: ${(p) => {
+  var _a, _b;
+  return p.selected ? (_a = p.theme.colors) == null ? void 0 : _a.primary : (_b = p.theme.colors) == null ? void 0 : _b.text;
+}};
+    ${(p) => p.selected && "font-weight: bold;"}
+
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) ? css`
+                      ${paddedBorderTabStyle}
+                      text-decoration: underline;
+                  ` : "outline: none;";
+}}
+    }
+`;
+const isEmpty = (toolbar) => {
+  const {
+    allowCopy = false,
+    allowPrint = false,
+    guideCategories = false,
+    language = false,
+    showFavoriteToggle = false,
+    picker = PickerTypes.NONE
+  } = toolbar;
+  if (!allowCopy && !allowPrint && !language && !showFavoriteToggle && !guideCategories || picker === PickerTypes.NONE) {
+    return true;
+  }
+  return false;
+};
+const Toolbar = ({ className = "", dispatch }) => {
+  const _a = useProperties(), {
+    toolbarLanguageHeader,
+    toolbarFunctionsHeader,
+    toolbarLanguageTooltip,
+    toolbarFunctionsTooltip,
+    toolbarFunctionsCloseButtonAriaLabel,
+    printActionLabel,
+    copyActionLabel,
+    addFavoriteTooltip,
+    removeFavoriteCancelLabel,
+    removeFavoriteConfirmLabel,
+    removeFavoriteHeader,
+    removeFavoriteLabel,
+    removeFavoriteTooltip,
+    guide,
+    toolbar
+  } = _a, other = __objRest(_a, [
+    "toolbarLanguageHeader",
+    "toolbarFunctionsHeader",
+    "toolbarLanguageTooltip",
+    "toolbarFunctionsTooltip",
+    "toolbarFunctionsCloseButtonAriaLabel",
+    "printActionLabel",
+    "copyActionLabel",
+    "addFavoriteTooltip",
+    "removeFavoriteCancelLabel",
+    "removeFavoriteConfirmLabel",
+    "removeFavoriteHeader",
+    "removeFavoriteLabel",
+    "removeFavoriteTooltip",
+    "guide",
+    "toolbar"
+  ]);
+  if (!guide || !toolbar || isEmpty(toolbar)) {
+    return null;
+  }
+  const { language, guideCategories, allowCopy, allowPrint, showFavoriteToggle, picker } = toolbar;
+  return /* @__PURE__ */ React.createElement(Wrapper$1, {
+    className: appendClassNames("humany-guide-toolbar", className)
+  }, language && Object.keys(guide.translations || {}).length > 1 && /* @__PURE__ */ React.createElement(Languages, __spreadValues({
+    guide,
+    header: toolbarLanguageHeader,
+    tooltip: toolbarLanguageTooltip,
+    picker
+  }, other)), guideCategories && /* @__PURE__ */ React.createElement(Categories, {
+    guide,
+    toolbar
+  }), (allowCopy || allowPrint || showFavoriteToggle) && /* @__PURE__ */ React.createElement(Functions, {
+    guide,
+    header: toolbarFunctionsHeader,
+    tooltip: toolbarFunctionsTooltip,
+    printActionLabel,
+    copyActionLabel,
+    addFavoriteTooltip,
+    removeFavoriteCancelLabel,
+    removeFavoriteConfirmLabel,
+    removeFavoriteHeader,
+    removeFavoriteLabel,
+    removeFavoriteTooltip,
+    toolbarFunctionsCloseButtonAriaLabel,
+    allowCopy,
+    allowPrint,
+    showFavoriteToggle,
+    picker,
+    dispatch
+  }));
+};
+const Wrapper$1 = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 0 0 auto;
+
+    > :not(:last-child) {
+        margin: 0 calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} * 2) 0 0;
+    }
+`;
+const Guide = forwardRef((_c, ref) => {
+  var _d = _c, { className, accordion = false } = _d, other = __objRest(_d, ["className", "accordion"]);
+  const {
+    loading = false,
+    dialog = [],
+    contactMethods = [],
+    showHeader = true,
+    showAnswerVersions = false,
+    defaultAnswerVersionLabel = "Default",
+    backButtonLabel,
+    metadataByLabel,
+    metadataModifiedLabel,
+    metadataPublishedLabel,
+    availablePerspectives,
+    metadata,
+    toolbar,
+    guide,
+    error
+  } = useProperties();
+  const {
+    params: { connection }
+  } = useRouteData();
+  const container = useContainer();
+  const children = useChildren();
+  const dispatch = useDispatch();
+  const handleBackButtonClick = useCallback(() => {
+    dispatch("back");
+  }, [dispatch]);
+  if (!guide && !error && !loading) {
+    return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
+      className: appendClassNames(className, "humany-guide")
+    }));
+  }
+  const { id = "", title = "", body = "", translations = {} } = guide || {};
+  if (error && error.status === 404) {
+    return /* @__PURE__ */ React.createElement(NotFound, {
+      showSearch: false
+    });
+  }
+  const showBackButton = !!accordion && !!connection;
+  const language = Object.keys(translations).find((key) => translations[key] === `${id}`);
+  return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({
+    ref
+  }, other), {
+    "data-loading": loading,
+    className: appendClassNames(className, "humany-guide")
+  }), /* @__PURE__ */ React.createElement(Content, {
+    "data-loading": loading,
+    accordion: accordion ? "true" : "false",
+    className: "humany-guide-content"
+  }, (showAnswerVersions && guide || !!toolbar) && /* @__PURE__ */ React.createElement(Top, {
+    className: "humany-guide-top"
+  }, showAnswerVersions && guide && /* @__PURE__ */ React.createElement(AnswerVersionPicker, {
+    defaultAnswerVersionLabel,
+    availablePerspectives,
+    guide
+  }), !!toolbar && /* @__PURE__ */ React.createElement(Toolbar, {
+    dispatch
+  })), !!(title || body) && /* @__PURE__ */ React.createElement(Body, {
+    className: "humany-guide-body",
+    accordion: accordion ? "true" : "false",
+    header: showHeader && title || void 0,
+    html: body,
+    htmlParseInstruction: guideRenderInstructions(container, dialog),
+    lang: language
+  }), dialog && body.indexOf("h-option-link") === -1 && /* @__PURE__ */ React.createElement(StyledDialogList, {
+    dialog
+  }), /* @__PURE__ */ React.createElement(StyledContactList, {
+    backButtonShown: showBackButton ? "true" : "false",
+    contactMethods,
+    dispatch,
+    guideId: guide && guide.id
+  }), !contactMethods.length && /* @__PURE__ */ React.createElement(Feedback, {
+    backButtonShown: showBackButton,
+    accordion
+  }), showBackButton && /* @__PURE__ */ React.createElement(BackButton, {
+    "aria-label": backButtonLabel,
+    onClick: handleBackButtonClick
+  }, /* @__PURE__ */ React.createElement(Caret, {
+    width: "7",
+    height: "13",
+    viewBox: "0 0 7 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React.createElement("line", {
+    x1: "6.64645",
+    y1: "12.5513",
+    x2: "0.648357",
+    y2: "6.55319"
+  }), /* @__PURE__ */ React.createElement("line", {
+    x1: "0.646447",
+    y1: "6.64455",
+    x2: "6.64454",
+    y2: "0.646465"
+  })), backButtonLabel && /* @__PURE__ */ React.createElement("span", null, backButtonLabel)), metadata && /* @__PURE__ */ React.createElement(StyledMetadata, __spreadProps(__spreadValues({}, metadata), {
+    modified: guide == null ? void 0 : guide.modified,
+    published: guide == null ? void 0 : guide.published,
+    modifiedBy: guide == null ? void 0 : guide.modifiedBy,
+    publishedBy: guide == null ? void 0 : guide.publishedBy,
+    byLabel: metadataByLabel,
+    modifiedLabel: metadataModifiedLabel,
+    publishedLabel: metadataPublishedLabel
+  })), children.map((child) => /* @__PURE__ */ React.createElement(StyledComponents, __spreadValues({
+    key: child.id,
+    id: child.id,
+    branch: "default"
+  }, { embedded: true })))), /* @__PURE__ */ React.createElement(Loader, {
+    loading
+  }));
+});
+const Wrapper = styled.div`
+    ${loadingOpacity}
+    min-width: 0;
+`;
+const Body = styled(Paragraph)`
+    ${genericHtml}
+    ${(p) => {
+  var _a;
+  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.large};`;
+}}
+  display: block;
+    line-height: 1.6em;
+    ${headingElement("h1", css`
+            font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
+}};
+            font-weight: normal;
+            line-height: 1.6em;
+            line-height: 1.6em;
+            margin: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+        `)}
+
+    p {
+        font-weight: 300;
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        a {
+            display: inline;
+        }
+    }
+`;
+const StyledContactList = styled(ContactList)`
+    border-top: ${(p) => p.theme.border};
+    ${(p) => p.backButtonShown === "true" && `border-bottom: ${p.theme.border};`}
+`;
+const StyledDialogList = styled(DialogList)`
+    ${(p) => {
+  var _a, _b;
+  return `padding: 0 ${(_a = p.theme.sizes) == null ? void 0 : _a.large} ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
+}}
+    display: block;
+`;
+const Top = styled.div`
+    ${(p) => {
+  var _a, _b;
+  return `padding: calc(${(_a = p.theme.sizes) == null ? void 0 : _a.normal}*2) ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
+}}
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: ${(p) => p.theme.border};
+    border-radius: ${(p) => `${p.theme.borderRadius} ${p.theme.borderRadius}`} 0 0;
+    background-color: #ffffff;
+`;
+const Content = styled.div`
+    ${contentBox}
+    display: block;
+    > a {
+        ${contactLink}
+    }
+
+    ${(p) => p.accordion === "true" && css`
+            white-space: normal;
+            box-shadow: none;
+            background-color: #fafafa;
+        `}
+`;
+const StyledMetadata = styled(Metadata)`
+    display: block;
+    ${(p) => {
+  var _a, _b;
+  return `padding: calc(${(_a = p.theme.sizes) == null ? void 0 : _a.normal}*2) ${(_b = p.theme.sizes) == null ? void 0 : _b.large};`;
+}}
+    font-weight: 300;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    border-top: ${(p) => p.theme.border};
+`;
+const StyledComponents = styled(Component)`
+    border-top: ${(p) => p.theme.border};
+`;
+const BackButton = styled(Button)`
+    ${(p) => {
+  var _a, _b;
+  return `padding: ${(_a = p.theme.sizes) == null ? void 0 : _a.normal} calc(${(_b = p.theme.sizes) == null ? void 0 : _b.normal} * 2);`;
+}}
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    text-decoration: underline;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    span {
+        font-weight: 300;
+    }
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${linkTabStyle}
+                padding: ${(p2) => {
+    var _a2, _b;
+    return `calc(${(_a2 = p2.theme.sizes) == null ? void 0 : _a2.small} / 2) ${(_b = p2.theme.sizes) == null ? void 0 : _b.small}`;
+  }};
+            `;
+}};
+    }
+`;
+const Caret = styled.svg`
+    margin-right: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    line {
+        stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    }
+`;
+export { Guide as default };
+//# sourceMappingURL=guide.js.map