@telia-ace/widget-types-grid 1.0.7 → 1.0.10

package/dist/index.js

@@ -0,0 +1,1416 @@
+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 { asDescriptor, ComponentPlatform, createComponentModel, ComponentQuery, WidgetRenderState } from "@telia-ace/widget-core";
+import { Grid, useRouteData, useRouter, useProperties, useContext, useContainer, useComponentNode, useScroll, transitionComposer, paddedBorderTabStyle, useComponent, useComponentDescriptor, filterCssPropsStyle, useComponentPlatform, useIsMounted, useColumns, useLayout, ComponentNodeContext, ComponentPropertyContext, filterCssProps } from "@telia-ace/widget-ui";
+import React, { useState, forwardRef, useMemo, Suspense, useEffect, useContext as useContext$1 } from "react";
+import styled, { css, ThemeContext, ThemeProvider } from "styled-components";
+import { appendClassNames, notifyDataLoaded, lock, removeNullAndUndefinedValues, uuid } from "@telia-ace/widget-utilities";
+import { TransitionGroup, Transition } from "react-transition-group";
+import { Switch as Switch$1, Route } from "react-router";
+import { onWidgetUrl } from "@telia-ace/widget-routing";
+import { readStorage, StorageMedium, createStorageWriter, StorageCategory, StorageScope } from "@telia-ace/widget-services";
+import { supportBootstrapping } from "@webprovisions/bootstrapping";
+import { WidgetState, WidgetType } from "@webprovisions/platform";
+var SlideDirection = /* @__PURE__ */ ((SlideDirection2) => {
+  SlideDirection2["back"] = "back";
+  SlideDirection2["forth"] = "forth";
+  return SlideDirection2;
+})(SlideDirection || {});
+const determineSlideDirection = (currentRouteName, nextRouteName, routeRanking) => {
+  if (typeof routeRanking[currentRouteName] === "number" && typeof routeRanking[nextRouteName] === "number" && routeRanking[currentRouteName] > routeRanking[nextRouteName]) {
+    return "back";
+  }
+  return "forth";
+};
+const Switch = ({ views, location, render }) => {
+  return /* @__PURE__ */ React.createElement(Switch$1, {
+    location: location ? __spreadProps(__spreadValues({}, location), {
+      pathname: location.pathname.split("?")[0]
+    }) : location
+  }, [
+    ...Object.keys(views).filter((key) => !!views[key].path),
+    ...Object.keys(views).filter((key) => !views[key].path)
+  ].map((name) => {
+    const { path } = views[name];
+    if (!path) {
+      return /* @__PURE__ */ React.createElement(Route, {
+        key: name,
+        render: () => render(name)
+      });
+    }
+    if (Array.isArray(path)) {
+      return path.map((path2) => /* @__PURE__ */ React.createElement(Route, {
+        key: name,
+        exact: true,
+        path: path2,
+        render: () => render(name)
+      }));
+    }
+    return /* @__PURE__ */ React.createElement(Route, {
+      key: name,
+      exact: true,
+      path,
+      render: () => render(name)
+    });
+  }));
+};
+const StyledViewContainer = styled.div`
+    position: relative;
+    width: 100%;
+    flex: 1;
+`;
+const StyledView$2 = styled(Grid)`
+    position: absolute;
+    left: 0;
+    right: 0;
+    ${(p) => !!p.animationCss && p.animationCss}
+    ${(p) => !!p.scrollableCss && p.scrollableCss}
+`;
+const routeHierarchy = {
+  index: 1,
+  search: 2,
+  browse: 3,
+  guide: 4,
+  contact: 5,
+  "contact-method": 6,
+  conversation: 7
+};
+const AnimatedView = (_a) => {
+  var _b = _a, { className = "" } = _b, other = __objRest(_b, ["className"]);
+  const [routeName, setRouteName] = useState("index");
+  const [transitionDirection, setTransitionDirection] = useState(SlideDirection.forth);
+  const nextRoute = useRouteData();
+  const router = useRouter();
+  const properties = useProperties();
+  const context = useContext();
+  const container = useContainer();
+  const node = useComponentNode();
+  const { gap = "0" } = context;
+  const _a2 = properties, { columns = 1, animation = "none", scrollable = false } = _a2, areaProperties = __objRest(_a2, ["columns", "animation", "scrollable"]);
+  const [scrollableCss, elem] = useScroll(scrollable);
+  if (!node || !router) {
+    return null;
+  }
+  const { location } = router;
+  if (nextRoute.name !== routeName && nextRoute.name !== "" && animation) {
+    setTransitionDirection(determineSlideDirection(routeName, nextRoute.name, routeHierarchy));
+    setRouteName(nextRoute.name);
+  }
+  const { views } = container.get("$settings");
+  if (!Object.keys(views).length) {
+    return null;
+  }
+  const renderView = (name, transitionState, direction) => {
+    const animationStyles = getAnimation(transitionState, direction);
+    const childNode = node.getChildren(name)[0];
+    return /* @__PURE__ */ React.createElement(StyledView$2, __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, other), areaProperties), {
+      scrollableCss,
+      ref: elem,
+      columns,
+      gap
+    }), animationStyles), {
+      className: appendClassNames(className, "humany-view")
+    }), /* @__PURE__ */ React.createElement(Component, {
+      id: childNode.id,
+      branch: "default"
+    }));
+  };
+  const getAnimation = (transitionState, direction) => {
+    if (animation === "slide" || animation === "fade") {
+      return {
+        animationCss: transitionComposer.composeViewTransition(transitionState, animation, direction),
+        ["data-state"]: transitionState
+      };
+    }
+    return;
+  };
+  return /* @__PURE__ */ React.createElement(StyledViewContainer, {
+    className: "humany-animated-view"
+  }, /* @__PURE__ */ React.createElement(TransitionGroup, {
+    component: null,
+    childFactory: (child) => React.cloneElement(child, { direction: transitionDirection })
+  }, /* @__PURE__ */ React.createElement(Transition, {
+    key: routeName,
+    timeout: { enter: 500, exit: 500 },
+    onEnter: (node2) => node2 == null ? void 0 : node2.clientHeight,
+    unmountOnExit: true,
+    direction: SlideDirection.forth
+  }, (state, { direction }) => /* @__PURE__ */ React.createElement(Switch, {
+    views,
+    location,
+    render: (name) => renderView(name, state, direction)
+  }))));
+};
+const StyledView$1 = styled(Grid)`
+    ${(p) => !!p.scrollableCss && p.scrollableCss}
+`;
+const View = (_c) => {
+  var _d = _c, { className = "" } = _d, other = __objRest(_d, ["className"]);
+  const properties = useProperties();
+  const context = useContext();
+  const container = useContainer();
+  const node = useComponentNode();
+  const { views } = container.get("$settings");
+  const { gap = "0" } = context;
+  const _a = properties, { columns = 1, animation = "none", scrollable = false } = _a, areaProperties = __objRest(_a, ["columns", "animation", "scrollable"]);
+  const [scrollableCss, elem] = useScroll(scrollable);
+  if (!node) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(StyledView$1, __spreadProps(__spreadValues(__spreadValues({}, other), areaProperties), {
+    scrollableCss,
+    ref: elem,
+    columns,
+    gap,
+    className: appendClassNames(className, "humany-view")
+  }), /* @__PURE__ */ React.createElement(Switch, {
+    views,
+    render: (name) => {
+      const childNode = node.getChildren(name)[0];
+      return /* @__PURE__ */ React.createElement(Component, {
+        id: childNode.id,
+        node: childNode,
+        branch: "default"
+      });
+    }
+  }));
+};
+const styling = css`
+    outline: none;
+    box-sizing: border-box;
+    * {
+        ${(p) => {
+  var _a;
+  return !((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && "outline: none;";
+}}
+        box-sizing: border-box;
+    }
+
+    grid-column: ${(p) => p["data-indent"] ? `${p["data-indent"] + 1} / ${p["data-indent"] + p["data-width"] + 1}` : `span ${p["data-width"]}`};
+
+    ${(p) => {
+  var _a;
+  return ((_a = p.theme.fonts) == null ? void 0 : _a.type) && `
+    font-family: ${p.theme.fonts.type};
+
+    input, textarea {
+      font-family: ${p.theme.fonts.type};
+    }
+  `;
+}}
+
+    ${(p) => {
+  var _a;
+  return ((_a = p.theme.fonts) == null ? void 0 : _a.base) && `
+    font-size: ${p.theme.fonts.base};
+  `;
+}}
+
+  &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && paddedBorderTabStyle;
+}};
+    }
+`;
+const StyledView = styled(View)`
+    ${styling}
+`;
+const StyledAnimatedView = styled(AnimatedView)`
+    ${styling}
+`;
+styled.div`
+    text-align: center;
+    ${(p) => {
+  var _a, _b, _c;
+  return typeof ((_a = p.theme.colors) == null ? void 0 : _a.warning) !== "undefined" && css`
+            color: ${(_b = p.theme.colors) == null ? void 0 : _b.warning};
+            border: 2px dashed ${(_c = p.theme.colors) == null ? void 0 : _c.warning};
+        `;
+}}
+    ${(p) => typeof p.theme.borderRadius !== "undefined" && `border-radius: ${p.theme.borderRadius};`}
+  ${styling}
+`;
+const ResolvableComponent = forwardRef((_e, ref) => {
+  var _f = _e, { className = "", children } = _f, other = __objRest(_f, ["className", "children"]);
+  const ResolvedComponent = useComponent();
+  const { name, type, id } = useComponentDescriptor();
+  const StyledResolvableComponent = useMemo(() => {
+    if (ResolvedComponent) {
+      return styled(ResolvedComponent)`
+                    ${styling}
+                    ${filterCssPropsStyle}
+                `;
+    }
+    return null;
+  }, [ResolvedComponent]);
+  if (typeof ResolvedComponent === "undefined") {
+    return null;
+  }
+  if (ResolvedComponent === null || StyledResolvableComponent === null) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Suspense, {
+    fallback: null
+  }, /* @__PURE__ */ React.createElement(StyledResolvableComponent, __spreadProps(__spreadValues({
+    ref
+  }, other), {
+    className: appendClassNames(className, "humany-component", `humany-component-${name}`)
+  }), children));
+});
+var useComponentNodeProperties = (id) => {
+  const node = useComponentNode(id);
+  const components = useComponentPlatform();
+  const [properties, setProperties] = useState({});
+  const isMounted = useIsMounted();
+  useEffect(() => {
+    if (node && isMounted.current) {
+      setProperties(node.attributes.properties);
+    }
+  }, [node, id, isMounted]);
+  useEffect(() => {
+    if (components) {
+      const unsubscribe = components.events.subscribe("components:properties-changed", (event, data) => {
+        if (node === data.node && isMounted.current) {
+          setProperties(data.node.attributes.properties);
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    }
+  }, [components, isMounted, id, node]);
+  return properties;
+};
+const isVisible = (size, node) => {
+  if (node) {
+    return true;
+  }
+  if (typeof size === "string") {
+    return size === "full";
+  }
+  return size > 0;
+};
+const Component = forwardRef((_g, ref) => {
+  var _h = _g, {
+    className = "",
+    isTabbing = false,
+    id,
+    branch,
+    node,
+    ariaLabel,
+    tabIndex,
+    context: extraContext
+  } = _h, other = __objRest(_h, [
+    "className",
+    "isTabbing",
+    "id",
+    "branch",
+    "node",
+    "ariaLabel",
+    "tabIndex",
+    "context"
+  ]);
+  var _b;
+  const components = useComponentPlatform();
+  const container = useContainer();
+  const [descriptor, setDescriptor] = useState();
+  const themeContext = React.useContext(ThemeContext) || {};
+  const columns = useColumns();
+  const context = useContext(id);
+  const properties = useComponentNodeProperties(id);
+  const { size = "none", indent = 0 } = useLayout(id);
+  const visible = isVisible(size, node);
+  useEffect(() => {
+    if (components) {
+      if (id && !node) {
+        const componentNode = components.nodes.get(id);
+        if (componentNode) {
+          setDescriptor(asDescriptor(componentNode, branch));
+          if (visible) {
+            const unmount = componentNode.mount(container);
+            return () => {
+              unmount();
+            };
+          }
+        }
+      } else if (node) {
+        setDescriptor(asDescriptor(node, branch));
+        const unmount = node.mount(container);
+        return () => {
+          unmount();
+        };
+      }
+    }
+  }, [components, id, node, visible]);
+  if (!descriptor || !visible) {
+    return null;
+  }
+  const mergedContexts = __spreadValues(__spreadValues({}, context), extraContext || {});
+  const _a = mergedContexts, {
+    cardinal,
+    fonts: contextFonts = {},
+    accessibility = {}
+  } = _a, restContext = __objRest(_a, [
+    "cardinal",
+    "fonts",
+    "accessibility"
+  ]);
+  const fonts = {
+    type: contextFonts.type,
+    base: contextFonts.base || "16px",
+    small: contextFonts.small || "0.8em",
+    normal: contextFonts.normal || "1em",
+    medium: contextFonts.medium || "1.2em",
+    large: contextFonts.large || "1.6em",
+    huge: contextFonts.huge || "2.5em"
+  };
+  const theme = __spreadProps(__spreadValues({}, restContext), {
+    fonts,
+    accessibility: __spreadProps(__spreadValues({}, accessibility), {
+      isTabbing: ((_b = themeContext.accessibility) == null ? void 0 : _b.isTabbing) || isTabbing
+    })
+  });
+  if (typeof cardinal === "number") {
+    theme.sizes = {
+      cardinal,
+      small: `${cardinal}px`,
+      normal: `${cardinal * 3}px`,
+      medium: `${cardinal * 5}px`,
+      large: `${cardinal * 8}px`
+    };
+  }
+  return /* @__PURE__ */ React.createElement(ThemeProvider, {
+    theme
+  }, /* @__PURE__ */ React.createElement(ComponentNodeContext.Provider, {
+    value: descriptor
+  }, /* @__PURE__ */ React.createElement(ComponentPropertyContext.Provider, {
+    value: properties
+  }, (() => {
+    const props = __spreadValues({
+      "data-width": size === "full" ? columns : Math.min(size, columns),
+      "data-indent": indent,
+      "data-name": descriptor.name,
+      "data-node-id": descriptor.id,
+      "data-component-type": descriptor.type,
+      "aria-label": ariaLabel,
+      tabIndex,
+      id: descriptor.id,
+      role: properties && properties.role
+    }, other);
+    switch (descriptor.type) {
+      case "view": {
+        return typeof properties.animation === "string" && properties.animation !== "none" ? /* @__PURE__ */ React.createElement(StyledAnimatedView, __spreadProps(__spreadValues({}, props), {
+          className
+        })) : /* @__PURE__ */ React.createElement(StyledView, __spreadProps(__spreadValues({}, props), {
+          className
+        }));
+      }
+      default: {
+        const cssProps = filterCssProps(properties);
+        return /* @__PURE__ */ React.createElement(ResolvableComponent, __spreadProps(__spreadValues(__spreadValues({
+          ref
+        }, props), cssProps), {
+          className
+        }));
+      }
+    }
+  })())));
+});
+const DetachedComponent$1 = ({ builder }) => {
+  const container = useContainer();
+  const [node, setNode] = useState(null);
+  useEffect(() => {
+    container.getAsync("components").then((components) => {
+      return builder(components).then((createdNode) => {
+        setNode(createdNode);
+      });
+    });
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (node) {
+        container.getAsync("components").then((components) => {
+          components.nodes.detached = components.nodes.detached.filter((n) => n.id !== node.id);
+        });
+      }
+    };
+  }, [node]);
+  if (!node) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Component, {
+    id: node.id,
+    node,
+    branch: "default"
+  });
+};
+var detachedComponent = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  "default": DetachedComponent$1
+}, Symbol.toStringTag, { value: "Module" }));
+const DetachedComponent = React.lazy(() => Promise.resolve().then(function() {
+  return detachedComponent;
+}));
+const NotFound = ({ showSearch = false }) => {
+  const themeContext = useContext$1(ThemeContext);
+  const container = useContainer();
+  return /* @__PURE__ */ React.createElement(React.Suspense, {
+    fallback: null
+  }, /* @__PURE__ */ React.createElement(DetachedComponent, {
+    builder: (components) => {
+      return container.get("settings").then((settings) => {
+        var _a;
+        const { properties, context } = Object.keys(settings.components).reduce((acc, key) => {
+          if (settings.components[key].type === "not-found") {
+            acc.properties = settings.components[key].properties;
+            acc.context = settings.components[key].context;
+          }
+          return acc;
+        }, { properties: {}, context: {} });
+        properties.showSearch = showSearch;
+        const node = components.createNode("area", { detached: true });
+        node.name = "not-found-area";
+        node.writeLayout({
+          size: "full"
+        });
+        if (showSearch) {
+          const searchComponentProps = Object.keys(settings.components).reduce((acc, key) => {
+            if (settings.components[key].type === "search") {
+              return settings.components[key].properties;
+            }
+            return acc;
+          }, {});
+          const searchNode = components.createNode("search", { detached: true });
+          searchNode.writeLayout({ size: "full" });
+          searchNode.writeProperties(__spreadValues({
+            "css-margin-bottom": ((_a = themeContext == null ? void 0 : themeContext.sizes) == null ? void 0 : _a.normal) || "15px"
+          }, searchComponentProps));
+          node.appendChild(searchNode);
+        }
+        const notFoundNode = components.createNode("not-found", { detached: true });
+        notFoundNode.writeLayout({ size: "full" });
+        notFoundNode.writeProperties(properties);
+        notFoundNode.writeContext(context);
+        node.appendChild(notFoundNode);
+        return node;
+      });
+    }
+  }));
+};
+const renderSymbol = (symbol) => {
+  if (symbol) {
+    const { type, content } = symbol;
+    switch (type) {
+      case "FontAwesome":
+        return `<i class="humany-icon fa fa-${content}"></i>`;
+      case "Uri":
+        return `<i class="humany-icon humany-custom-icon" style="background: url(${content}) no-repeat center center;background-size: contain;"></i>`;
+      default:
+        return "";
+    }
+  }
+};
+const triggerTabHandler = (triggerDOMElement) => {
+  const toggleTabbing = (element, tabbing) => {
+    if (!element) {
+      return;
+    }
+    if (tabbing) {
+      element.classList.add("humany-tabbing");
+    } else {
+      element.classList.remove("humany-tabbing");
+    }
+  };
+  const handleKeydown = (e) => {
+    if (e.key === "Tab") {
+      toggleTabbing(triggerDOMElement, true);
+    } else if (!(e.key === "Enter" && document.activeElement && document.activeElement.classList.contains("humany-trigger"))) {
+      toggleTabbing(triggerDOMElement, false);
+    }
+  };
+  const handleClick = (e) => {
+    if (document.activeElement && document.activeElement.classList.contains("humany-trigger") && document.activeElement.classList.contains("humany-tabbing")) {
+      return;
+    }
+    toggleTabbing(triggerDOMElement, false);
+  };
+  document.addEventListener("keydown", handleKeydown);
+  document.addEventListener("click", handleClick);
+  return () => {
+    document.removeEventListener("keydown", handleKeydown);
+    document.removeEventListener("click", handleClick);
+  };
+};
+function createTriggerElement(element, options) {
+  const { symbol, widgetName, label = "", ariaLabel = "", tooltip = "" } = options;
+  element.classList.add("humany-trigger");
+  element.classList.add(`humany_${widgetName}`);
+  if (label.length) {
+    element.classList.add("humany-has-text");
+  }
+  if (ariaLabel.length && !element.getAttribute("aria-label")) {
+    element.setAttribute("aria-label", ariaLabel);
+  }
+  if (ariaLabel.length && !element.getAttribute("tabindex")) {
+    element.setAttribute("tabindex", "0");
+  }
+  if (tooltip.length && !element.getAttribute("title")) {
+    element.setAttribute("title", tooltip);
+  }
+  const symbolHtml = renderSymbol(symbol) || "";
+  element.innerHTML = `${symbolHtml}
+          <span class="humany-close">
+            <svg width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M9 9C8.81794 9.00045 8.63759 8.96634 8.46939 8.89965C8.3012 8.83295 8.14851 8.735 8.02015 8.61145L0.194523 1.12367C0.068294 0.99862 -0.00155266 0.831133 2.61958e-05 0.657285C0.00160506 0.483436 0.0744832 0.317136 0.202964 0.194202C0.331445 0.0712675 0.505249 0.00153576 0.686941 2.50649e-05C0.868634 -0.00148563 1.04368 0.0653456 1.17437 0.186125L9 7.6739L16.8256 0.186125C16.9563 0.0653456 17.1314 -0.00148563 17.3131 2.50649e-05C17.4948 0.00153576 17.6686 0.0712675 17.797 0.194202C17.9255 0.317136 17.9984 0.483436 18 0.657285C18.0016 0.831133 17.9317 0.99862 17.8055 1.12367L9.97985 8.61145C9.85149 8.735 9.6988 8.83295 9.53061 8.89965C9.36241 8.96634 9.18206 9.00045 9 9Z" fill="white"/>
+            </svg>
+          </span>
+          <span class="humany-loader">
+            <svg viewBox="25 25 50 50">
+              <circle
+                cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+                stroke="#000"
+                stroke-width="2"
+                stroke-miterlimit="10" />
+            </svg>
+          </span>
+          ${label.length ? `<span>${label}</span>` : ""}`;
+  setTimeout(() => element && element.classList.add("humany-rendered"));
+  return triggerTabHandler(element);
+}
+function setInactive(elements, title) {
+  if (elements instanceof HTMLElement) {
+    if (title) {
+      elements.setAttribute("title", title);
+    }
+    elements.classList.remove("humany-active");
+    elements.classList.remove("humany-loading");
+  } else if (elements instanceof Array) {
+    elements.forEach((e) => {
+      if (title) {
+        e.setAttribute("title", title);
+      }
+      e.classList.remove("humany-active");
+      e.classList.remove("humany-loading");
+    });
+  }
+}
+function setLoading(elements) {
+  if (elements instanceof HTMLElement) {
+    elements.classList.remove("humany-active");
+    elements.classList.add("humany-loading");
+  } else if (elements instanceof Array) {
+    elements.forEach((e) => {
+      e.classList.remove("humany-active");
+      e.classList.add("humany-loading");
+    });
+  }
+}
+function setActive(elements, title) {
+  if (elements instanceof HTMLElement) {
+    if (title) {
+      elements.setAttribute("title", title);
+    }
+    elements.classList.add("humany-active");
+    elements.classList.remove("humany-loading");
+  } else if (elements instanceof Array) {
+    elements.forEach((e) => {
+      if (title) {
+        e.setAttribute("title", title);
+      }
+      e.classList.add("humany-active");
+      e.classList.remove("humany-loading");
+    });
+  }
+}
+var TriggerType = /* @__PURE__ */ ((TriggerType2) => {
+  TriggerType2["Inline"] = "inline";
+  TriggerType2["Link"] = "link";
+  TriggerType2["Badge"] = "badge";
+  TriggerType2["Unsupported"] = "unsupported";
+  return TriggerType2;
+})(TriggerType || {});
+const determineProvidedElements = (widgetDOMElement, triggerDOMElement) => {
+  if (widgetDOMElement && triggerDOMElement) {
+    return "both";
+  }
+  if (widgetDOMElement) {
+    return "widgetDOM";
+  }
+  if (triggerDOMElement) {
+    return "triggerDOM";
+  }
+  return "none";
+};
+const determineTriggerType = (triggerDefinition) => {
+  if (!triggerDefinition) {
+    return "inline";
+  }
+  if (typeof triggerDefinition === "boolean" && triggerDefinition) {
+    return "link";
+  }
+  if (typeof triggerDefinition === "object" && !Array.isArray(triggerDefinition)) {
+    return "badge";
+  }
+  return "unsupported";
+};
+const prepareDOMElements = (name, providedWidgetElement, providedTriggerElement, triggerDefinition, waitWithReplace = false) => {
+  var _a, _b;
+  const providedElements = determineProvidedElements(providedWidgetElement, providedTriggerElement);
+  const triggerType = determineTriggerType(triggerDefinition);
+  const cachedOriginals = {
+    widgetDOMElement: providedWidgetElement ? providedWidgetElement.cloneNode(true) : void 0,
+    triggerDOMElement: providedTriggerElement ? providedTriggerElement.cloneNode(true) : void 0
+  };
+  const output = {
+    triggerType,
+    cachedOriginals,
+    widgetDOMElement: document.createElement("div")
+  };
+  switch (providedElements) {
+    case "both": {
+      output.widgetDOMElement = providedWidgetElement || document.createElement("div");
+      if (triggerType !== "inline") {
+        output.triggerDOMElement = providedTriggerElement;
+      }
+      break;
+    }
+    case "widgetDOM": {
+      output.widgetDOMElement = providedWidgetElement || document.createElement("div");
+      if (triggerType !== "inline") {
+        const triggerElement = document.body.appendChild(document.createElement("a"));
+        if (triggerType === "link") {
+          triggerElement.innerText = name;
+        }
+        output.triggerDOMElement = triggerElement;
+      }
+      break;
+    }
+    case "triggerDOM": {
+      const widgetElement = document.createElement("div");
+      output.widgetDOMElement = widgetElement;
+      if (triggerType === "inline") {
+        widgetElement.id = (providedTriggerElement == null ? void 0 : providedTriggerElement.id) || "";
+        if (waitWithReplace) {
+          widgetElement.style.display = "none";
+          (_a = providedTriggerElement == null ? void 0 : providedTriggerElement.parentNode) == null ? void 0 : _a.appendChild(widgetElement);
+          output.callback = () => {
+            var _a2;
+            (_a2 = providedTriggerElement == null ? void 0 : providedTriggerElement.parentNode) == null ? void 0 : _a2.replaceChild(widgetElement, providedTriggerElement);
+            widgetElement.style.display = (providedTriggerElement == null ? void 0 : providedTriggerElement.style.display) || "block";
+          };
+        } else {
+          (_b = providedTriggerElement == null ? void 0 : providedTriggerElement.parentNode) == null ? void 0 : _b.replaceChild(widgetElement, providedTriggerElement);
+        }
+        output.cachedOriginals.widgetDOMElement = providedTriggerElement;
+        output.cachedOriginals.triggerDOMElement = void 0;
+      } else {
+        output.widgetDOMElement = document.body.appendChild(widgetElement);
+        output.triggerDOMElement = providedTriggerElement;
+      }
+      break;
+    }
+    case "none": {
+      const widgetElement = document.body.appendChild(document.createElement("div"));
+      output.widgetDOMElement = widgetElement;
+      if (triggerType !== "inline") {
+        const triggerElement = document.body.appendChild(document.createElement("a"));
+        if (triggerType === "link") {
+          triggerElement.innerText = name;
+        }
+        output.triggerDOMElement = triggerElement;
+      }
+      break;
+    }
+  }
+  return output;
+};
+const MODALS_STORAGE_KEY = "modals";
+class ViewOutlet {
+  constructor(container, options) {
+    this.options = options;
+    this.unsubscribe = [];
+    this.container = container.createChild(this);
+    this.container.register("widgetDOMElement", this.options.widgetDOMElement);
+    this.container.register("triggerDOMElement", this.options.triggerDOMElement);
+    const widget = this.container.get("$widget");
+    this.options.widgetDOMElement.classList.add("humany-widget");
+    this.options.widgetDOMElement.classList.add(`humany_${widget.name}`);
+    const widgetDOMElements = container.get("widgetDOMElements") || [];
+    container.register("widgetDOMElements", [
+      ...widgetDOMElements,
+      this.options.widgetDOMElement
+    ]);
+  }
+  render() {
+    const { widgetDOMElement, triggerDOMElement } = this.options;
+    const widget = this.container.get("$widget");
+    if (widgetDOMElement.getAttribute("data-rendered") === "true") {
+      return Promise.resolve();
+    }
+    if (triggerDOMElement && this.options.triggerType === TriggerType.Badge) {
+      setLoading(triggerDOMElement);
+    }
+    return import("./render.js").then((module) => module.default(this.container, widgetDOMElement)).then(() => {
+      widgetDOMElement.setAttribute("data-rendered", "true");
+      if (triggerDOMElement && this.options.triggerType === TriggerType.Badge) {
+        const tooltip = this.options.triggerOptions.openTooltip;
+        setActive(triggerDOMElement, tooltip);
+      }
+      notifyDataLoaded(this.container, widgetDOMElement);
+      const widgets = this.container.get("$environment").widgets.all();
+      readStorage(this.container, MODALS_STORAGE_KEY, StorageMedium.Session).then((modals) => {
+        if (modals) {
+          modals.forEach((modal) => {
+            if (widgets.find((w) => w.name === modal.name && w.state === "activated")) {
+              widget.events.dispatch("widget:modal-opened", modal);
+            }
+          });
+        }
+      });
+    });
+  }
+  renderBadge(options) {
+    const { triggerDOMElement } = this.options;
+    if (!triggerDOMElement) {
+      return;
+    }
+    if (!triggerDOMElement.getAttribute("role")) {
+      triggerDOMElement.setAttribute("role", "button");
+    }
+    const { name } = this.container.get("$widget");
+    const { label, symbol, ariaLabel, closedTooltip, openTooltip } = options;
+    const triggerOptions = { closedTooltip, openTooltip };
+    this.options.triggerOptions = triggerOptions;
+    const removeTriggerListeners = createTriggerElement(triggerDOMElement, {
+      label,
+      symbol,
+      ariaLabel,
+      widgetName: name,
+      tooltip: closedTooltip
+    });
+    this.unsubscribe.push(removeTriggerListeners);
+  }
+  dispose() {
+    return import("./unmount.js").then((module) => {
+      var _a, _b, _c, _d;
+      const { triggerDOMElement, widgetDOMElement } = this.options;
+      module.default(widgetDOMElement);
+      if (this.options.cachedOriginals.widgetDOMElement) {
+        if (widgetDOMElement) {
+          (_a = widgetDOMElement.parentNode) == null ? void 0 : _a.replaceChild(this.options.cachedOriginals.widgetDOMElement, widgetDOMElement);
+        }
+      }
+      if (this.options.cachedOriginals.triggerDOMElement) {
+        if (triggerDOMElement) {
+          (_b = triggerDOMElement.parentNode) == null ? void 0 : _b.replaceChild(this.options.cachedOriginals.triggerDOMElement, triggerDOMElement);
+        }
+      }
+      this.unsubscribe.forEach((unsubscribe) => {
+        unsubscribe();
+      });
+      (_c = widgetDOMElement.parentNode) == null ? void 0 : _c.removeChild(widgetDOMElement);
+      (_d = triggerDOMElement == null ? void 0 : triggerDOMElement.parentNode) == null ? void 0 : _d.removeChild(triggerDOMElement);
+    });
+  }
+}
+const STORAGE_KEY = "changesets";
+const convertSettingsToAttributes = (settings) => {
+  const attributes = { tags: settings.tags };
+  if (settings.context && typeof settings.context !== "function") {
+    attributes.context = settings.context;
+  }
+  if (settings.properties && typeof settings.properties !== "function") {
+    attributes.properties = settings.properties;
+  }
+  if (settings.layout && typeof settings.layout !== "function") {
+    attributes.layout = settings.layout;
+  }
+  return attributes;
+};
+class LocalStorageChangesetProvider {
+  constructor(container, storageWriter) {
+    this.container = container;
+    this.storageWriter = storageWriter;
+  }
+  static create(container) {
+    return createStorageWriter(container, STORAGE_KEY, StorageCategory.Necessary, {
+      medium: StorageMedium.Local
+    }).then((storageWriter) => new LocalStorageChangesetProvider(container, storageWriter));
+  }
+  write(key, target, attributes, options) {
+    return lock(this)(() => {
+      return readStorage(this.container, STORAGE_KEY, StorageMedium.Local).then((bag = {}) => {
+        const { keys = [], items = {} } = bag;
+        const existingIndex = keys.indexOf(key);
+        if (existingIndex > -1) {
+          keys.splice(existingIndex, 1);
+        }
+        keys.push(key);
+        items[key] = {
+          options,
+          attributes: convertSettingsToAttributes(attributes),
+          rules: target.rules
+        };
+        return this.storageWriter({ keys, items });
+      });
+    });
+  }
+  remove(key) {
+    return lock(this)(() => {
+      return readStorage(this.container, STORAGE_KEY, StorageMedium.Local).then((bag = {}) => {
+        const { keys = [], items = {} } = bag;
+        const indexToRemove = keys.indexOf(key);
+        if (indexToRemove > -1) {
+          keys.splice(indexToRemove, 1);
+          delete items[key];
+          return this.storageWriter(bag);
+        }
+      });
+    });
+  }
+  load(platform) {
+    return lock(this)(() => {
+      return readStorage(this.container, STORAGE_KEY, StorageMedium.Local).then((bag = {}) => {
+        const { keys = [], items = {} } = bag;
+        keys.forEach((key) => {
+          const item = items[key];
+          if (item) {
+            const { rules, attributes, options } = item;
+            platform.write({
+              attributes,
+              options,
+              target: new ComponentQuery(platform, rules)
+            });
+          }
+        });
+      });
+    });
+  }
+}
+const createPlatform = (widget) => {
+  const { container } = widget;
+  return LocalStorageChangesetProvider.create(container).then((localStorage) => {
+    const settings = container.get("$settings");
+    const providers = { localStorage };
+    const platform = new ComponentPlatform(widget, providers);
+    const destructComponentModel = createComponentModel(platform, settings);
+    widget.events.subscribe("widget:state-change", (event, data) => {
+      if (data.state === WidgetState.Deactivating) {
+        destructComponentModel();
+      }
+    });
+    return platform;
+  });
+};
+const createSiteProvider = (site, forceHttps) => {
+  return () => {
+    const parseLocation = (href) => {
+      const link = document.createElement("a");
+      link.href = href;
+      return link;
+    };
+    let location = window.location;
+    if (site === "referrer" && document.referrer) {
+      location = parseLocation(document.referrer);
+    }
+    return [forceHttps ? "https:" : "", "//", location.host, location.pathname].join("");
+  };
+};
+const createRoutingService = (container) => {
+  return import("@telia-ace/widget-routing").then(({ RoutingService, HistoryMode }) => {
+    return container.get("settings").then((settings) => {
+      const {
+        routing: { initialPath = "/", mode = HistoryMode.scopedHash, basePath },
+        views
+      } = settings;
+      const routingService = new RoutingService(container, {
+        initialPath,
+        mode,
+        routes: Object.keys(views).map((name) => ({
+          name,
+          path: views[name].path
+        })),
+        basePath
+      });
+      return routingService;
+    });
+  });
+};
+const createStorageService = (container) => {
+  return import("@telia-ace/widget-services").then(({ StorageProvider }) => {
+    return new StorageProvider();
+  });
+};
+const createServiceClient = (container) => {
+  return import("@telia-ace/knowledge-serviceclient").then(({ ServiceClient, ServiceProxy }) => {
+    return container.get("settings").then((settings) => {
+      const { name, events } = container.get("$widget");
+      const {
+        data: { projection = "", site = "current", forceHttps = false }
+      } = settings;
+      const proxy = new ServiceProxy(projection, { credentials: "same-origin" });
+      const client = new ServiceClient(proxy, {
+        funnel: name.replace("_contact-method", "").replace("_contact", ""),
+        site: createSiteProvider(site, forceHttps)
+      });
+      events.subscribe("widget:settings-updated", (event, { data }) => {
+        if (data && data.projection !== projection) {
+          client.proxy.setBaseUrl(data.projection);
+        }
+      });
+      return client;
+    });
+  });
+};
+const createActionResolver = (container) => {
+  return import("@telia-ace/widget-core").then(({ ActionResolver }) => {
+    return new ActionResolver(container);
+  });
+};
+const createComponentResolver = (container) => {
+  return import("@telia-ace/widget-core").then(({ ComponentResolver }) => {
+    return new ComponentResolver(container);
+  });
+};
+const createComponentPlatform = (container) => {
+  return import("@telia-ace/widget-core").then(({ ComponentPlatform: ComponentPlatform2, createComponentModel: createComponentModel2 }) => {
+    return createPlatform(container.get("$widget"));
+  });
+};
+const SETTINGS_STORAGE_KEY = "$settings";
+const OPEN_STORAGE_KEY = "open";
+const STICKY_WIDGET_STORAGE_KEY = "activeStickyWidget";
+class Widget extends WidgetType {
+  constructor(container) {
+    super(container);
+    this.outlets = /* @__PURE__ */ new Map();
+    this.activated = void 0;
+    this.subs = [];
+    this.handleBootstrapping = (activationData) => {
+      const options = {
+        triggerDOMElement: activationData.sourceDOMElement,
+        withRenderState: "storage"
+      };
+      this.container.get("settings").then((settings) => {
+        const { activate } = settings;
+        const shouldActivate = typeof activate === "undefined" || activate === null || activate === true;
+        if (shouldActivate) {
+          this.activated = (this.activated || this.widget.activate()).then(() => this.attach(options));
+        }
+      });
+    };
+    this.container.registerAsync("storage", () => createStorageService(this.container));
+    this.container.registerFactory("settings", () => {
+      return readStorage(this.container, SETTINGS_STORAGE_KEY, StorageMedium.Local).then((settings = {}) => {
+        return __spreadValues(__spreadValues({}, this.container.get("$settings")), settings);
+      });
+    });
+    supportBootstrapping(this, "load", this.handleBootstrapping);
+    this.container.registerAsync("componentResolver", () => createComponentResolver(this.container));
+    this.container.registerAsync("matchingClient", () => createServiceClient(this.container));
+    this.container.registerAsync("router", () => createRoutingService(this.container));
+    this.container.registerAsync("actionResolver", () => createActionResolver(this.container));
+    this.container.register("matchMedia", window.matchMedia);
+    this.container.registerAsync("components", () => createComponentPlatform(this.container));
+  }
+  initialize() {
+    const promises = this.container.getManyAsync("actionResolver", "router", "components");
+    return Promise.all([promises, this.container.get("settings")]).then(([{ actionResolver, router, components }, settings]) => {
+      var _a;
+      actionResolver.subscribe(this.widget.name, (origin, action, value) => this.onAction(action, value));
+      const switchViewNodes = (routeName) => {
+        components.nodes.query({ type: "view" }).forEach((viewNode) => {
+          components.setSwitch(viewNode, routeName);
+        });
+      };
+      const initialRoute = ((_a = router.getInitialRoute()) == null ? void 0 : _a.name) || "index";
+      switchViewNodes(initialRoute);
+      this.events.subscribe("widget:data-loaded", (e, { element }) => {
+        if (this.widget.container.get("seoConfiguration")) {
+          this.events.dispatch("widget:preloaded-replaced", {
+            element
+          });
+        }
+      });
+      this.events.subscribe("router:change", (e, { previous = { routeData: {} }, next = { routeData: {} } }) => {
+        const { routeData: prevData } = previous;
+        const { routeData: nextData } = next;
+        const notFoundView = Object.keys(settings.views).reduce((acc, key) => {
+          const view = settings.views[key];
+          if (typeof view.path === "undefined") {
+            return key;
+          }
+          return acc;
+        }, "");
+        if (!nextData.name && notFoundView) {
+          switchViewNodes(notFoundView);
+        } else {
+          switchViewNodes(nextData.name);
+        }
+        removeNullAndUndefinedValues(prevData && prevData.params);
+        removeNullAndUndefinedValues(nextData && nextData.params);
+        this.container.getAsync("actionResolver").then((actionResolver2) => {
+          actionResolver2.action(this.widget.name, "routeChange", {
+            next: nextData,
+            previous: prevData
+          });
+        });
+      });
+      return router.initialize();
+    });
+  }
+  attach(attachData = {}) {
+    return this.container.get("settings").then(({ trigger }) => {
+      var _a, _b;
+      const {
+        widgetDOMElement,
+        key = uuid(),
+        triggerDOMElement,
+        withRenderState
+      } = attachData;
+      const triggerType = determineTriggerType(trigger);
+      const waitWithReplace = triggerType === TriggerType.Inline && ((triggerDOMElement == null ? void 0 : triggerDOMElement.childElementCount) || 0) > 0;
+      const outletOptions = prepareDOMElements(this.widget.name, widgetDOMElement, triggerDOMElement, trigger, waitWithReplace);
+      if (this.outlets.size < 1 && !withRenderState) {
+        this.setRenderState("unset");
+      }
+      const swap = () => {
+        const isReady = () => widgetDOMElement2.querySelectorAll("[data-loading=true]").length === 0;
+        const [widgetDOMElement2] = this.widget.container.get("widgetDOMElements");
+        const watcher = (mutations, observer2) => {
+          if (isReady()) {
+            if (outletOptions.callback) {
+              outletOptions.callback();
+            }
+            observer2.disconnect();
+          }
+        };
+        const options = {
+          attributes: true,
+          subtree: true
+        };
+        if (isReady()) {
+          outletOptions.callback && outletOptions.callback();
+        }
+        const observer = new MutationObserver(watcher);
+        observer.observe(widgetDOMElement2, options);
+      };
+      if (waitWithReplace) {
+        this.widget.container.getAsync("dataClient").then(({ events }) => {
+          events.subscribe("data-client:fetched", (event, data) => {
+            if (data.unresolvedQueries === 0) {
+              swap();
+            }
+          });
+        });
+      }
+      const outlet = this.getOrCreateViewOutlet(key, outletOptions);
+      this.outlets.set(key, outlet);
+      this.widget.events.dispatch("widget:attached", {}, { bubbles: true });
+      if (outletOptions.triggerType === TriggerType.Badge && trigger) {
+        (_a = outletOptions.triggerDOMElement) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+        outlet == null ? void 0 : outlet.renderBadge(trigger);
+      }
+      if (outletOptions.triggerType !== TriggerType.Inline) {
+        (_b = outletOptions.triggerDOMElement) == null ? void 0 : _b.addEventListener("click", (event) => {
+          event.preventDefault();
+          this.container.get("settings").then(({ trigger: updatedTrigger }) => {
+            outlet.render().then(() => this.renderState()).then((renderState) => {
+              if (updatedTrigger && updatedTrigger.action && updatedTrigger.action === "hide") {
+                return renderState === WidgetRenderState.open ? this.hide() : this.open();
+              }
+              return renderState === WidgetRenderState.open ? this.close() : this.open();
+            });
+          });
+        });
+      }
+      if (this.outlets.size > 1) {
+        return this.renderState().then((state) => {
+          this.triggerStateIfApplicable(state);
+        });
+      }
+      if (withRenderState) {
+        if (withRenderState === "storage") {
+          return this.renderState().then((state) => {
+            if (outletOptions.triggerType === TriggerType.Inline) {
+              this.triggerStateIfApplicable("open");
+              return;
+            }
+            this.triggerStateIfApplicable(state);
+          });
+        }
+        return this.triggerStateIfApplicable(withRenderState);
+      }
+    });
+  }
+  detach(key) {
+    if (key) {
+      if (this.outlets.has(key)) {
+        const outlet = this.outlets.get(key);
+        outlet == null ? void 0 : outlet.dispose();
+        this.outlets.delete(key);
+        return;
+      }
+      return;
+    }
+    this.outlets.forEach((outlet) => {
+      outlet.dispose();
+    });
+    this.outlets.clear();
+  }
+  triggerStateIfApplicable(input) {
+    return this.container.getAsync("router").then((router) => {
+      switch (input) {
+        case "closed":
+          this.close();
+          break;
+        case "open":
+          this.open();
+          break;
+        case "hidden":
+          this.hide();
+          router.start();
+          break;
+        default:
+          return;
+      }
+    });
+  }
+  getOrCreateViewOutlet(key, options) {
+    return this.outlets.has(key) ? this.outlets.get(key) : new ViewOutlet(this.container, options);
+  }
+  render(renderData = {}) {
+    if (renderData.open) {
+      const options = __spreadProps(__spreadValues({}, renderData), {
+        withRenderState: "open"
+      });
+      return this.attach(options);
+    }
+    return this.attach(renderData);
+  }
+  activate(data) {
+    if (data == null ? void 0 : data.override) {
+      this.setSettings(() => data.override);
+    }
+    if (data == null ? void 0 : data.apiNotificationPriorityBy) {
+      this.container.register("apiNotificationPriorityBy", data.apiNotificationPriorityBy);
+    }
+  }
+  setSettings(fn) {
+    return Promise.all([
+      this.container.get("settings"),
+      createStorageWriter(this.container, SETTINGS_STORAGE_KEY, StorageCategory.Necessary, {
+        medium: StorageMedium.Local
+      })
+    ]).then(([settings, write]) => {
+      return Promise.resolve(fn(settings)).then((override) => {
+        return write(override).then(() => {
+          const updated = __spreadValues(__spreadValues({}, settings), override);
+          this.widget.events.dispatch("widget:settings-updated", updated);
+          return updated;
+        });
+      });
+    });
+  }
+  clearSettings() {
+    return createStorageWriter(this.container, SETTINGS_STORAGE_KEY, StorageCategory.Necessary, { medium: StorageMedium.Local }).then((write) => write()).then(() => this.container.get("settings")).then((settings) => {
+      this.widget.events.dispatch("widget:settings-updated", settings);
+    });
+  }
+  action({ action, value }) {
+    return this.container.getAsync("actionResolver").then((actionResolver) => {
+      actionResolver.action(this.widget.name, action, value);
+    });
+  }
+  renderState() {
+    if (onWidgetUrl(this.container)) {
+      return Promise.resolve(WidgetRenderState.open);
+    }
+    const readSessionOpen = () => readStorage(this.container, OPEN_STORAGE_KEY, StorageMedium.Session).then((value = WidgetRenderState.closed) => value);
+    const readLocalOpen = () => readStorage(this.container, OPEN_STORAGE_KEY, StorageMedium.Session).then((value = WidgetRenderState.closed) => value);
+    return this.container.getAsync("router").then((routing) => {
+      if (routing.isSticky()) {
+        return readLocalOpen().then((localOpen) => {
+          return localOpen === WidgetRenderState.open ? localOpen : readSessionOpen();
+        });
+      }
+      return readSessionOpen();
+    });
+  }
+  hide() {
+    if (this.outlets.size < 1) {
+      return Promise.resolve();
+    }
+    this.outlets.forEach((outlet) => outlet.render());
+    return this.action({ action: "hide" }).then(() => {
+      this.setTriggerState(false);
+    });
+  }
+  open() {
+    if (this.outlets.size < 1) {
+      return Promise.resolve();
+    }
+    this.outlets.forEach((outlet) => outlet.render());
+    return this.action({ action: "open" }).then(() => {
+      this.widget.events.dispatch("tracking:widget-rendered", {});
+      return this.onOpen();
+    });
+  }
+  close() {
+    if (this.outlets.size < 1) {
+      return Promise.resolve();
+    }
+    return this.action({ action: "close" }).then(() => this.onClose());
+  }
+  show() {
+    return this.open();
+  }
+  onAction(action, value) {
+    switch (action) {
+      case "close":
+      case "open":
+      case "hide":
+        const newState = action === "open" ? WidgetRenderState.open : action === "close" ? WidgetRenderState.closed : WidgetRenderState.hidden;
+        return this.setRenderState(newState).then(() => {
+          this.setTriggerState(newState === WidgetRenderState.open);
+          if (newState !== WidgetRenderState.hidden) {
+            newState === WidgetRenderState.open ? this.onOpen() : this.onClose();
+          } else {
+            this.outlets.forEach((outlet) => {
+              var _a;
+              return (_a = outlet.options.triggerDOMElement) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+            });
+          }
+        });
+    }
+  }
+  setRenderState(newState) {
+    const { invoke, events } = this.container.get("$widget");
+    return Promise.all([
+      createStorageWriter(this.container, OPEN_STORAGE_KEY, StorageCategory.Necessary, {
+        medium: StorageMedium.Session
+      }),
+      createStorageWriter(this.container, OPEN_STORAGE_KEY, StorageCategory.Necessary, {
+        medium: StorageMedium.Local,
+        duration: { minutes: 5 }
+      }),
+      this.container.getAsync("router"),
+      invoke("renderState")
+    ]).then(([writeSessionOpen, writeLocalOpen, routing, previousRenderState]) => {
+      if (newState === "unset" || !newState) {
+        writeLocalOpen();
+        writeSessionOpen();
+      } else {
+        if (routing.isSticky()) {
+          writeLocalOpen(newState);
+        }
+        writeSessionOpen(newState);
+      }
+      events.dispatch("widget:render-state-changed", {
+        previous: previousRenderState,
+        next: newState
+      });
+    });
+  }
+  onOpen() {
+    return this.container.getAsync("router").then((router) => {
+      this.outlets.forEach((outlet) => {
+        var _a;
+        return (_a = outlet.options.triggerDOMElement) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
+      });
+      return router.start();
+    });
+  }
+  onClose() {
+    const services = this.container.getManyAsync("router", "components");
+    const resetActivateProp = () => {
+      return this.container.get("settings").then((widgetSettings) => {
+        const { activate } = this.container.get("$settings");
+        if (widgetSettings.activate !== activate) {
+          return this.setSettings(() => Promise.resolve({ activate }));
+        }
+        return Promise.resolve();
+      });
+    };
+    return resetActivateProp().then(() => {
+      return services;
+    }).then(({
+      router,
+      components
+    }) => {
+      const visibleNodes = components.nodes.visible;
+      this.outlets.forEach((outlet) => {
+        var _a;
+        return (_a = outlet.options.triggerDOMElement) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+      });
+      if (visibleNodes.filter((c) => c.attributes.properties.animation && c.attributes.properties.animation !== "none").length) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(router);
+          }, 200);
+        });
+      }
+      return Promise.resolve(router);
+    }).then((router) => router.stop());
+  }
+  setTriggerState(open) {
+    this.outlets.forEach((outlet) => {
+      const {
+        options: { triggerDOMElement, triggerOptions }
+      } = outlet;
+      const { openTooltip, closedTooltip } = triggerOptions || {};
+      if (triggerDOMElement) {
+        open ? setActive(triggerDOMElement, openTooltip) : setInactive(triggerDOMElement, closedTooltip);
+      }
+    });
+  }
+  deactivate() {
+    this.subs.forEach((s) => s());
+    const promises = [];
+    this.outlets.forEach((outlet) => promises.push(outlet.dispose()));
+    return readStorage(this.container, STICKY_WIDGET_STORAGE_KEY, StorageMedium.Local).then((value) => {
+      if (value === this.widget.name) {
+        return createStorageWriter(this.container, STICKY_WIDGET_STORAGE_KEY, StorageCategory.Necessary, {
+          medium: StorageMedium.Local,
+          scope: StorageScope.Implementation
+        }).then((write) => write()).then(() => Promise.all(promises));
+      }
+      return Promise.all(promises);
+    });
+  }
+}
+export { Component, DetachedComponent$1 as DetachedComponent, Widget as GridWidget, NotFound, Widget, styling as genericComponentStyling };
+//# sourceMappingURL=index.js.map