@telia-ace/widget-ui 1.0.13 → 1.0.16

package/dist/index.js

@@ -29,9 +29,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import styled, { css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import { kebabCase, appendClassNames, uuid, removeNullAndUndefinedValues } from "@telia-ace/widget-utilities";
-import React, { forwardRef, createContext, useContext as useContext$1, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, lazy } from "react";
+import React, { forwardRef, createContext, useContext as useContext$1, useState, useEffect, useRef, useCallback, useImperativeHandle, useMemo, Component, lazy } from "react";
 import { CSSTransition, Transition } from "react-transition-group";
 import { Container, WidgetState } from "@webprovisions/platform";
 import { ComponentPlatform, asDescriptor, createEventSubscriber, ComponentQuery, WidgetRenderState, extendComponent } from "@telia-ace/widget-core";
@@ -343,14 +343,14 @@ const AnchorLink = (props) => {
 };
 var Button = forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, other = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React.createElement(StyledButton, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React.createElement(StyledButton$2, __spreadProps(__spreadValues({
     type: "button",
     className: appendClassNames(className, "humany-button")
   }, convertToStringAttributes(other)), {
     ref
   }), children);
 });
-const StyledButton = styled.button`
+const StyledButton$2 = styled.button`
     -webkit-appearance: button;
     text-transform: none;
     overflow: visible;
@@ -1168,17 +1168,21 @@ const genericHtml = css`
         margin: 0;
     }
 `;
-const Portal = ({ elementId = "humany-portal-elements", children }) => {
-  const [container] = React.useState(() => {
+const Portal = ({
+  elementId = "humany-portal-elements",
+  parent = document.body,
+  children
+}) => {
+  const [container] = useState(() => {
     const el = document.getElementById(elementId) || document.createElement("div");
     el.id = elementId;
     return el;
   });
   useEffect(() => {
-    document.body.appendChild(container);
+    parent.appendChild(container);
     return () => {
       if (container.childElementCount <= 1) {
-        document.body.removeChild(container);
+        parent.removeChild(container);
       }
     };
   }, [container]);
@@ -1597,6 +1601,30 @@ const SymbolBadge = (_g) => {
             fill: "white"
           }));
         }
+        case "video": {
+          if (style.minWidth && typeof style.minWidth === "number") {
+            style.minWidth = `${style.minWidth}px`;
+          }
+          return /* @__PURE__ */ React.createElement("svg", __spreadProps(__spreadValues({
+            viewBox: "0 0 25 25"
+          }, svgProps), {
+            style
+          }), /* @__PURE__ */ React.createElement("path", {
+            d: "M16.8245 10.0758C18.7392 8.55799 21.3085 7.08973 21.7947 7.61552C22.5982 8.47863 22.5288 16.6929 21.7947 17.4766C21.3482 17.9627 18.7589 16.4945 16.8245 14.9866",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M2.61914 12.5385C2.61914 7.12973 4.41578 5.32715 9.80764 5.32715C15.1985 5.32715 16.9952 7.12973 16.9952 12.5385C16.9952 17.9462 15.1985 19.7497 9.80764 19.7497C4.41578 19.7497 2.61914 17.9462 2.61914 12.5385Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }));
+        }
         case "star-empty": {
           return /* @__PURE__ */ React.createElement("svg", __spreadValues({
             viewBox: "0 0 13 12"
@@ -1624,6 +1652,62 @@ const SymbolBadge = (_g) => {
             fill: "black"
           }));
         }
+        case "zoom-in": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M21.9774 20.8287L17.9149 16.7662C17.8437 16.6957 17.76 16.639 17.668 16.5992C20.7612 12.9331 20.415 7.48045 16.883 4.23507C13.3509 0.989694 7.88848 1.10517 4.49673 4.49691C1.10499 7.88866 0.98951 13.3511 4.23489 16.8831C7.48027 20.4152 12.9329 20.7614 16.599 17.6682C16.6388 17.7601 16.6955 17.8439 16.766 17.9151L20.8285 21.9776C21.1457 22.2948 21.6601 22.2948 21.9774 21.9776C22.2947 21.6603 22.2947 21.1459 21.9774 20.8287ZM10.8404 18.1531C6.80186 18.1531 3.52794 14.8792 3.52794 10.8406C3.52794 6.80204 6.80186 3.52813 10.8404 3.52813C14.879 3.52813 18.1529 6.80204 18.1529 10.8406C18.1483 14.8773 14.8771 18.1484 10.8404 18.1531Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10.8749 6.75003C11.2892 6.75003 11.6249 7.08581 11.6249 7.50003V14.25C11.6249 14.6642 11.2892 15 10.8749 15C10.4607 15 10.1249 14.6642 10.1249 14.25V7.50003C10.1249 7.08581 10.4607 6.75003 10.8749 6.75003Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6.74994 10.875C6.74994 10.4608 7.08573 10.125 7.49994 10.125H14.2499C14.6642 10.125 14.9999 10.4608 14.9999 10.875C14.9999 11.2892 14.6642 11.625 14.2499 11.625H7.49994C7.08573 11.625 6.74994 11.2892 6.74994 10.875Z",
+            fill: "white"
+          }));
+        }
+        case "zoom-out": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M22.1025 20.9536L18.04 16.8911C17.9688 16.8206 17.8851 16.764 17.7931 16.7241C20.8864 13.0581 20.5401 7.60539 17.0081 4.36001C13.476 1.11463 8.0136 1.23011 4.62185 4.62185C1.23011 8.0136 1.11463 13.476 4.36001 17.0081C7.60539 20.5401 13.0581 20.8864 16.7241 17.7931C16.764 17.8851 16.8206 17.9688 16.8911 18.04L20.9536 22.1025C21.2709 22.4198 21.7853 22.4198 22.1025 22.1025C22.4198 21.7853 22.4198 21.2709 22.1025 20.9536ZM10.9656 18.2781C6.92698 18.2781 3.65306 15.0041 3.65306 10.9656C3.65306 6.92698 6.92698 3.65306 10.9656 3.65306C15.0041 3.65306 18.2781 6.92698 18.2781 10.9656C18.2734 15.0022 15.0022 18.2734 10.9656 18.2781Z",
+            fill: "white"
+          }), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6.87506 11C6.87506 10.5858 7.21085 10.25 7.62506 10.25H14.3751C14.7893 10.25 15.1251 10.5858 15.1251 11C15.1251 11.4142 14.7893 11.75 14.3751 11.75H7.62506C7.21085 11.75 6.87506 11.4142 6.87506 11Z",
+            fill: "white"
+          }));
+        }
+        case "download": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M22.5 11.1346V18.4038C22.498 20.1873 21.0527 21.6326 19.2692 21.6346H4.73077C2.94731 21.6326 1.50204 20.1873 1.5 18.4038V11.1346C1.5 10.6885 1.86162 10.3269 2.30769 10.3269C2.75377 10.3269 3.11538 10.6885 3.11538 11.1346V18.4038C3.1164 19.2956 3.83904 20.0182 4.73077 20.0192H19.2692C20.161 20.0182 20.8836 19.2956 20.8846 18.4038V11.1346C20.8846 10.6885 21.2462 10.3269 21.6923 10.3269C22.1384 10.3269 22.5 10.6885 22.5 11.1346ZM11.1434 16.2663C11.6167 16.7388 12.3832 16.7388 12.8565 16.2663L17.4172 11.7057C17.7326 11.3903 17.7326 10.8789 17.4172 10.5635C17.1018 10.2481 16.5904 10.2481 16.275 10.5635L12.8076 14.0308V3.05769C12.8076 2.61162 12.446 2.25 11.9999 2.25C11.5539 2.25 11.1923 2.61162 11.1923 3.05769V14.0308L7.72485 10.5636C7.40946 10.2482 6.89812 10.2482 6.58273 10.5636C6.26734 10.8789 6.26734 11.3903 6.58273 11.7057L11.1434 16.2663Z",
+            fill: "white"
+          }));
+        }
+        case "lightbox-close": {
+          return /* @__PURE__ */ React.createElement("svg", __spreadValues({
+            viewBox: "0 0 24 24"
+          }, svgProps), /* @__PURE__ */ React.createElement("path", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M19.2621 18.1129C19.4674 18.3182 19.5475 18.6173 19.4724 18.8977C19.3973 19.178 19.1783 19.397 18.8979 19.4721C18.6176 19.5472 18.3184 19.4671 18.1132 19.2619L12.1877 13.3363L6.26214 19.2619C6.0569 19.4671 5.75776 19.5472 5.47741 19.4721C5.19705 19.397 4.97807 19.178 4.90294 18.8977C4.82782 18.6173 4.90798 18.3182 5.11321 18.1129L11.0388 12.1874L5.11321 6.26186C4.90798 6.05663 4.82782 5.75749 4.90294 5.47713C4.97807 5.19678 5.19705 4.97779 5.47741 4.90267C5.75776 4.82755 6.0569 4.9077 6.26214 5.11294L12.1877 11.0385L18.1132 5.11294C18.4305 4.79567 18.9449 4.79567 19.2621 5.11294C19.5794 5.4302 19.5794 5.9446 19.2621 6.26186L13.3366 12.1874L19.2621 18.1129Z",
+            fill: "white"
+          }));
+        }
       }
       return null;
     }
@@ -1760,7 +1844,7 @@ const Drawer = ({
     "aria-expanded": visible
   }));
 };
-const Wrapper$4 = styled.div`
+const Wrapper$7 = styled.div`
     font-family: ${(p) => {
   var _a;
   return (_a = p.theme.fonts) == null ? void 0 : _a.type;
@@ -1802,7 +1886,7 @@ const Header$1 = styled(Typography)`
 const AnimationBase = css`
     transition: ${(p) => p.duration}ms;
 `;
-const WrapperWithSlideInBottom = styled(Wrapper$4)`
+const WrapperWithSlideInBottom = styled(Wrapper$7)`
     max-height: 0;
     ${AnimationBase}
 
@@ -1820,7 +1904,7 @@ const WrapperWithSlideInBottom = styled(Wrapper$4)`
         max-height: 0;
     }
 `;
-const WrapperWithSlideInRight = styled(Wrapper$4)`
+const WrapperWithSlideInRight = styled(Wrapper$7)`
     ${AnimationBase}
     transform: translateX(100%);
     height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1839,7 +1923,7 @@ const WrapperWithSlideInRight = styled(Wrapper$4)`
         transform: translateX(100%);
     }
 `;
-const WrapperWithSlideInLeft = styled(Wrapper$4)`
+const WrapperWithSlideInLeft = styled(Wrapper$7)`
     ${AnimationBase}
     transform: translateX(-100%);
     height: ${(p) => p.fullScreen ? "100%" : "auto"};
@@ -1858,7 +1942,7 @@ const WrapperWithSlideInLeft = styled(Wrapper$4)`
         transform: translateX(-100%);
     }
 `;
-const WrapperWithSlideInTop = styled(Wrapper$4)`
+const WrapperWithSlideInTop = styled(Wrapper$7)`
     ${AnimationBase}
     bottom: unset;
     top: 0;
@@ -2011,9 +2095,9 @@ const StyledDropdown = styled.div`
 `;
 const Empty = (_k) => {
   var other = __objRest(_k, []);
-  return /* @__PURE__ */ React.createElement(Wrapper$3, __spreadValues({}, other));
+  return /* @__PURE__ */ React.createElement(Wrapper$6, __spreadValues({}, other));
 };
-const Wrapper$3 = styled.div`
+const Wrapper$6 = styled.div`
     display: none;
 `;
 var grid = forwardRef((_l, ref) => {
@@ -2268,14 +2352,14 @@ const Overlay = (_z) => {
     classNames: "humany-overlay-transition",
     unmountOnExit: true,
     timeout: duration
-  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$2, __spreadValues({
+  }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Wrapper$5, __spreadValues({
     className: "humany-overlay",
     duration,
     ref,
     onClick: onOverlayClick
   }, other), children)));
 };
-const Wrapper$2 = styled.div`
+const Wrapper$5 = styled.div`
     background: rgba(0, 0, 0, 0.6);
     min-width: 100%;
     min-height: 100%;
@@ -2306,9 +2390,240 @@ const Wrapper$2 = styled.div`
         opacity: 0;
     }
 `;
+const ZoomButtons = ({ zoom, zoomLevel }) => {
+  return /* @__PURE__ */ React.createElement(Wrapper$4, null, /* @__PURE__ */ React.createElement(Buttons, null, /* @__PURE__ */ React.createElement(StyledButton$1, {
+    "aria-label": "Zoom out",
+    onClick: () => {
+      zoom(false);
+    }
+  }, /* @__PURE__ */ React.createElement(StyledSymbolBadge$1, {
+    size: 24,
+    symbol: { type: "Svg", content: "zoom-out" }
+  })), /* @__PURE__ */ React.createElement(StyledButton$1, {
+    "aria-label": "Zoom in",
+    onClick: () => {
+      zoom(true);
+    }
+  }, /* @__PURE__ */ React.createElement(StyledSymbolBadge$1, {
+    size: 24,
+    symbol: { type: "Svg", content: "zoom-in" }
+  }))), /* @__PURE__ */ React.createElement(ZoomLevel, null, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "p"
+  }, zoomLevel, "%")));
+};
+const Wrapper$4 = styled.div`
+    width: 100vw;
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    justify-content: center;
+    flex-direction: row;
+`;
+const ZoomLevel = styled.div`
+    right: 45px;
+    position: absolute;
+    color: #fff;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    line-height: 1.5em;
+    ${(p) => {
+  var _a, _b;
+  return ((_a = p.theme.fonts) == null ? void 0 : _a.type) && `
+    font-family: ${(_b = p.theme.fonts) == null ? void 0 : _b.type};
+  `;
+}}
+`;
+const Buttons = styled.div`
+    position: relative;
+    margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+`;
+const StyledSymbolBadge$1 = styled(SymbolBadge)`
+    path {
+        stroke: #ffffff;
+    }
+`;
+const StyledButton$1 = styled(Button)`
+    transition: opacity 300ms ease-in-out;
+    opacity: 0.7;
+    &:hover {
+        opacity: 1;
+    }
+    margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+`;
+const spin = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const dash = keyframes`
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+`;
+const SpinnerSvg = styled.svg`
+    animation: ${spin} 2s linear infinite;
+    height: 100%;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    transition: 200ms ease-out opacity;
+`;
+const Wrapper$3 = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: ${(p) => p["data-loading"] ? "all" : "none"}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: 200ms ease-out opacity;
+  box-sizing: border-box;
+  overflow: hidden;
+  ${SpinnerSvg} {
+    opacity: ${(p) => p["data-loading"] ? "1" : "0"}
+  }
+`;
+const Spinner = styled.div`
+    position: relative;
+    margin: 0 auto;
+    width: 100px;
+    &:before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+    }
+`;
+const SpinnerCircle = styled.circle`
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: ${dash} 1.5s ease-in-out infinite;
+    stroke-linecap: round;
+    stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    stroke-width: 2px;
+`;
+const Loader = ({ loading = false }) => {
+  return /* @__PURE__ */ React.createElement(Wrapper$3, {
+    className: "humany-loader",
+    "data-loading": loading
+  }, /* @__PURE__ */ React.createElement(Spinner, {
+    className: "humany-spinner"
+  }, /* @__PURE__ */ React.createElement(SpinnerSvg, {
+    viewBox: "25 25 50 50"
+  }, /* @__PURE__ */ React.createElement(SpinnerCircle, {
+    cx: "50",
+    cy: "50",
+    r: "20",
+    fill: "none",
+    "stroke-width": "2",
+    "stroke-miterlimit": "10"
+  }))));
+};
+const ZoomImg = (_B) => {
+  var _C = _B, { zoomState } = _C, attrs = __objRest(_C, ["zoomState"]);
+  const ref = useRef(null);
+  const [loaded, setLoaded] = useState(false);
+  const _a = attrs.style || {}, { width, height } = _a, restStyle = __objRest(_a, ["width", "height"]);
+  const imageSize = useMemo(() => {
+    const img = ref.current;
+    if (img) {
+      if (img.width >= img.height) {
+        return [`${zoomState}vw`, "auto"];
+      } else {
+        return ["auto", `${zoomState}vh`];
+      }
+    }
+    return null;
+  }, [zoomState, ref, loaded]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Loader, {
+    loading: !loaded
+  }), /* @__PURE__ */ React.createElement(Img, __spreadProps(__spreadValues({
+    onLoad: () => {
+      setLoaded(true);
+    },
+    ref,
+    imageSize,
+    draggable: "false"
+  }, attrs), {
+    style: restStyle
+  })), /* @__PURE__ */ React.createElement(EmptyDiv, null));
+};
+const Img = styled.img`
+    transform: none;
+
+    ${(props) => props.imageSize ? css`
+                  width: ${props.imageSize[0]};
+                  height: ${props.imageSize[1]};
+                  display: inline-block;
+              ` : "display:none;"}
+    vertical-align: middle;
+    position: relative;
+`;
+const EmptyDiv = styled.div`
+    height: 100%;
+    display: inline-block;
+    vertical-align: middle;
+`;
+const useFadeOut = () => {
+  const timeOut = useRef();
+  const [show, setShow] = useState(true);
+  const triggerChange = useCallback(() => {
+    if (!show)
+      setShow(true);
+    if (timeOut.current) {
+      clearTimeout(timeOut.current);
+    }
+    timeOut.current = setTimeout(() => {
+      setShow(false);
+    }, 3e3);
+    return () => {
+      if (timeOut.current) {
+        clearTimeout(timeOut.current);
+      }
+    };
+  }, [show, timeOut]);
+  return [show, triggerChange];
+};
 const Lightbox = ({ attrs }) => {
   const [visible, toggleVisible] = useToggle(false);
   const esc = useKeyPress("Escape");
+  const [zoomState, setZoomState] = useState(80);
+  const [scroll, setScroll] = useState({ top: 0, left: 0, x: 0, y: 0 });
+  const [scrolling, setScrolling] = useState(false);
+  const [show, triggerFadeOut] = useFadeOut();
+  const ref = useRef(null);
   useEffect(() => {
     if (esc) {
       toggleVisible(false);
@@ -2317,44 +2632,134 @@ const Lightbox = ({ attrs }) => {
   const overlayClick = useCallback((e) => {
     toggleVisible(false);
   }, [toggleVisible]);
+  const changeZoomState = useCallback((zoomIn) => {
+    if (zoomIn) {
+      setZoomState(zoomState + 10);
+    } else {
+      setZoomState(zoomState - 10);
+    }
+  }, [setZoomState, zoomState]);
+  const downloadImage = useCallback(() => {
+    const { src } = attrs;
+    if (src) {
+      window.open(src, "_blank");
+    }
+  }, [attrs]);
+  const mouseDownHandler = useCallback((e) => {
+    const ele = ref.current;
+    if (ele) {
+      setScroll({ top: ele.scrollTop, left: ele.scrollLeft, x: e.clientX, y: e.clientY });
+      setScrolling(true);
+    }
+  }, [ref]);
+  const mouseDragHandler = useCallback((e) => {
+    const ele = ref.current;
+    if (ele && scrolling) {
+      const dx = e.clientX - scroll.x;
+      const dy = e.clientY - scroll.y;
+      ele.scrollTop = scroll.top - dy;
+      ele.scrollLeft = scroll.left - dx;
+    }
+  }, [scrolling, scroll]);
+  const mouseStopDragHandler = (e) => {
+    e.preventDefault();
+    setScrolling(false);
+  };
+  const isDraggable = useMemo(() => {
+    if (ref.current) {
+      const image = ref.current.getElementsByTagName("img");
+      if (image) {
+        const img = image[0];
+        return img.width > window.innerWidth || img.height > window.innerHeight;
+      }
+    }
+    return false;
+  }, [ref, zoomState]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, {
     visible,
     onClick: overlayClick
-  }, /* @__PURE__ */ React.createElement(CloseButton, {
+  }, /* @__PURE__ */ React.createElement(DraggableArea, {
+    onMouseDown: () => triggerFadeOut(),
+    onMouseMove: () => triggerFadeOut(),
+    onTouchStart: () => triggerFadeOut()
+  }, /* @__PURE__ */ React.createElement(TransparentBarTop, {
+    show
+  }, /* @__PURE__ */ React.createElement(DownloadButton, {
+    onClick: () => downloadImage()
+  }, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
+    size: 20,
+    symbol: { type: "Svg", content: "download" }
+  })), /* @__PURE__ */ React.createElement(CloseButton, {
     onClick: () => toggleVisible(false)
   }, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
-    size: 24,
-    symbol: { type: "Svg", content: "close" }
-  })), /* @__PURE__ */ React.createElement(Content$1, null, /* @__PURE__ */ React.createElement("img", __spreadValues({}, attrs)))), /* @__PURE__ */ React.createElement("a", {
+    size: 20,
+    symbol: { type: "Svg", content: "lightbox-close" }
+  }))), /* @__PURE__ */ React.createElement(Content$1, {
+    scrolling,
+    isDraggable,
+    ref,
+    onMouseMove: mouseDragHandler,
+    onMouseDown: mouseDownHandler,
+    onMouseUp: mouseStopDragHandler
+  }, /* @__PURE__ */ React.createElement(ZoomImg, __spreadValues({
+    zoomState
+  }, attrs))), /* @__PURE__ */ React.createElement(TransparentBarBottom, {
+    show
+  }, /* @__PURE__ */ React.createElement(ZoomButtons, {
+    zoom: changeZoomState,
+    zoomLevel: zoomState
+  })))), /* @__PURE__ */ React.createElement("a", {
     onClick: () => toggleVisible()
   }, /* @__PURE__ */ React.createElement(Thumbnail, __spreadValues({}, attrs))));
 };
+const TransparentBar = styled.div`
+    position: absolute;
+    width: 100vw;
+    height: 88px;
+    left: 0px;
+    transition: opacity 0.3s ease 0s;
+    z-index: 5;
+    ${(p) => p.show ? "opacity: 1;" : css`
+                  opacity: 0;
+                  pointer-events: none;
+              `}
+`;
+const DraggableArea = styled.div`
+    width: 100%;
+`;
+const TransparentBarTop = styled(TransparentBar)`
+    top: 0px;
+    background-image: linear-gradient(to bottom, rgb(15, 15, 15, 0.8), rgba(30, 30, 30, 0));
+`;
+const TransparentBarBottom = styled(TransparentBar)`
+    bottom: 0px;
+    background-image: linear-gradient(to top, rgb(15, 15, 15, 0.8), rgba(30, 30, 30, 0));
+`;
 const Content$1 = styled.div`
-    padding: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    max-width: 80%;
-    max-height: 80%;
-
-    img {
-        width: auto !important;
-        height: auto !important;
-        max-width: 100%;
-        max-height: 100%;
-    }
+    width: 100%;
+    height: 100vh;
+    overflow: auto;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    justify-content: center;
+    cursor: ${(props) => props.isDraggable ? props.scrolling ? "grabbing" : "grab" : "auto"};
 `;
-const CloseButton = styled(Button)`
+const StyledButton = styled(Button)`
     position: fixed;
-    top: 50px;
-    right: 50px;
+    top: 34px;
     transition: opacity 300ms ease-in-out;
     opacity: 0.7;
-
     &:hover {
         opacity: 1;
     }
 `;
+const CloseButton = styled(StyledButton)`
+    right: 32px;
+`;
+const DownloadButton = styled(StyledButton)`
+    right: 80px;
+`;
 const StyledSymbolBadge = styled(SymbolBadge)`
     path {
         stroke: #ffffff;
@@ -2363,9 +2768,9 @@ const StyledSymbolBadge = styled(SymbolBadge)`
 const Thumbnail = styled.img`
     cursor: pointer;
 `;
-var RouteLink = forwardRef((_B, forwardedRef) => {
-  var _C = _B, { className, onClick = () => {
-  }, name = "", to = "", params = {}, children } = _C, other = __objRest(_C, ["className", "onClick", "name", "to", "params", "children"]);
+var RouteLink = forwardRef((_D, forwardedRef) => {
+  var _E = _D, { className, onClick = () => {
+  }, name = "", to = "", params = {}, children } = _E, other = __objRest(_E, ["className", "onClick", "name", "to", "params", "children"]);
   const router = useRouter();
   const container = useContainer();
   if (!router) {
@@ -2421,8 +2826,8 @@ var RouteLink = forwardRef((_B, forwardedRef) => {
     to: path
   }), children);
 });
-var Link = forwardRef((_D, ref) => {
-  var _E = _D, {
+var Link = forwardRef((_F, ref) => {
+  var _G = _F, {
     className,
     disabled = false,
     role = "link",
@@ -2437,7 +2842,7 @@ var Link = forwardRef((_D, ref) => {
     target,
     routeName,
     params
-  } = _E, other = __objRest(_E, [
+  } = _G, other = __objRest(_G, [
     "className",
     "disabled",
     "role",
@@ -2500,9 +2905,9 @@ const StyledLink = styled.a`
     opacity: .7;
   ` : "cursor: pointer;"}
 `;
-const Modal = forwardRef((_F, ref) => {
-  var _G = _F, { className, children, trigger, onOverlayClick = () => {
-  }, close = false } = _G, other = __objRest(_G, ["className", "children", "trigger", "onOverlayClick", "close"]);
+const Modal = forwardRef((_H, ref) => {
+  var _I = _H, { className, children, trigger, onOverlayClick = () => {
+  }, close = false } = _I, other = __objRest(_I, ["className", "children", "trigger", "onOverlayClick", "close"]);
   const [visible, toggleVisible] = useToggle();
   const [css2, innerRef] = useScroll(true);
   const closeButtonRef = useRef();
@@ -2538,7 +2943,7 @@ const Modal = forwardRef((_F, ref) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, {
     visible,
     onClick: overlayClick
-  }, /* @__PURE__ */ React.createElement(Wrapper$1, __spreadProps(__spreadValues({
+  }, /* @__PURE__ */ React.createElement(Wrapper$2, __spreadProps(__spreadValues({
     className: appendClassNames(className, "humany-modal", `humany-modal-${id.current}`),
     css: css2,
     tabIndex: -1
@@ -2557,7 +2962,7 @@ const Modal = forwardRef((_F, ref) => {
     }
   }));
 });
-const Wrapper$1 = styled.div`
+const Wrapper$2 = styled.div`
     font-family: ${(p) => {
   var _a;
   return (_a = p.theme.fonts) == null ? void 0 : _a.type;
@@ -2692,7 +3097,7 @@ const NotFound = ({
   suggestionHeader = "",
   suggestion = ""
 }) => {
-  return /* @__PURE__ */ React.createElement(Wrapper, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
+  return /* @__PURE__ */ React.createElement(Wrapper$1, null, /* @__PURE__ */ React.createElement(Status, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "h2"
   }, "404")), /* @__PURE__ */ React.createElement(Header, null, /* @__PURE__ */ React.createElement(Typography, {
     variant: "h3"
@@ -2702,7 +3107,7 @@ const NotFound = ({
     text: link
   })), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement("span", null, suggestionHeader), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, suggestion))));
 };
-const Wrapper = styled.div`
+const Wrapper$1 = styled.div`
     display: flex;
     flex-wrap: wrap;
 `;
@@ -2808,8 +3213,8 @@ class TabStop extends Component {
     });
   }
 }
-var TextLink = forwardRef((_H, ref) => {
-  var _I = _H, { className, description, text, children } = _I, other = __objRest(_I, ["className", "description", "text", "children"]);
+var TextLink = forwardRef((_J, ref) => {
+  var _K = _J, { className, description, text, children } = _K, other = __objRest(_K, ["className", "description", "text", "children"]);
   return /* @__PURE__ */ React.createElement(Link, __spreadProps(__spreadValues({
     className: appendClassNames(className, "humany-text-link")
   }, other), {
@@ -2849,8 +3254,8 @@ function formatDate(unformattedDate, format) {
   }
   return `${dateString} ${timeString}`;
 }
-const Tooltip = (_J) => {
-  var _K = _J, { className, children, content, sticky = false } = _K, other = __objRest(_K, ["className", "children", "content", "sticky"]);
+const Tooltip = (_L) => {
+  var _M = _L, { className, children, content, sticky = false } = _M, other = __objRest(_M, ["className", "children", "content", "sticky"]);
   const [open, setOpen] = useState(false);
   const id = useRef(uuid());
   const ref = useRef();
@@ -2995,9 +3400,9 @@ const TransitionComponent = (props) => {
     onEnter: (node) => node.clientHeight
   }, (state) => children && children(state, def && transitionComposer.compose(state, def)));
 };
-var WidgetLink = forwardRef((_L, ref) => {
-  var _M = _L, { className, children, onClick = () => {
-  }, widgetName, activationOptions } = _M, other = __objRest(_M, ["className", "children", "onClick", "widgetName", "activationOptions"]);
+var WidgetLink = forwardRef((_N, ref) => {
+  var _O = _N, { className, children, onClick = () => {
+  }, widgetName, activationOptions } = _O, other = __objRest(_O, ["className", "children", "onClick", "widgetName", "activationOptions"]);
   const container = useContainer();
   const getWidget = () => {
     const { implementation } = container.get("$widget");
@@ -3051,6 +3456,38 @@ var WidgetLink = forwardRef((_L, ref) => {
     ref
   }), children);
 });
+const WidgetOverlayOutlet = forwardRef(({ portalId = "humany-widget-overlay-portal", className, children }, ref) => {
+  const container = useContainer();
+  const parentElement = useMemo(() => {
+    if (!container)
+      return null;
+    const widgetDOMElement = container.get("widgetDOMElement");
+    if (!widgetDOMElement || !widgetDOMElement.childElementCount)
+      return null;
+    return widgetDOMElement.children[0];
+  }, [container]);
+  if (!parentElement) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Portal, {
+    elementId: portalId,
+    parent: parentElement
+  }, /* @__PURE__ */ React.createElement(Wrapper, {
+    className: appendClassNames("humany-widget-overlay-outlet", className),
+    ref
+  }, children));
+});
+const Wrapper = styled.div`
+    background-color: #ffffff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+`;
 const createReactComponent = (container, type, reactComponent, fn, options) => {
   return container.getAsync("componentResolver").then((componentResolver) => {
     componentResolver.registerComponent(type, lazy(() => reactComponent));
@@ -3058,5 +3495,5 @@ const createReactComponent = (container, type, reactComponent, fn, options) => {
     }), type, options);
   });
 };
-export { AnchorLink, Button, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, DateFormats, Drawer, AnimationType as DrawerAnimationType, Dropdown, Empty, grid as Grid, Html, Icon, input as Input, ItemList, ItemTree, Lightbox, Link, List, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, RoutingContext, StyledText, SymbolBadge, TabStop, Text, TextLink, Timestamp, Tooltip, TransitionComponent, Typography, WidgetLink, borderTabStyle, browser, buttonCss, contentBox, convertToStringAttributes, createEmptyComponent, createReactComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, genericHtml, headingElement, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, parseHtmlString as processHtmlString, transitionComposer, useAction, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useEventListener, useEvents, useIsMounted, useKeyPress, useLayout, usePrevious, useProperties, useRenderState, useRouteData, useRouter, useScroll, useSettings, useToggle, useTransitionEnd, useUniqueMenu, useWidgetEvent };
+export { AnchorLink, Button, Checkbox, ColumnContext, ComponentNodeContext, ComponentPropertyContext, Confirm, ContainerContext, DateFormats, Drawer, AnimationType as DrawerAnimationType, Dropdown, Empty, grid as Grid, Html, Icon, input as Input, ItemList, ItemTree, Lightbox, Link, List, Modal, NotFound, Overlay, Paragraph, Portal, RouteLink, RoutingContext, StyledText, SymbolBadge, TabStop, Text, TextLink, Timestamp, Tooltip, TransitionComponent, Typography, WidgetLink, WidgetOverlayOutlet, borderTabStyle, browser, buttonCss, contentBox, convertToStringAttributes, createEmptyComponent, createReactComponent, defaultRenderInstructions, embeddedLinkMapper, filterCssProps, filterCssPropsStyle, genericHashLink, genericHtml, headingElement, invertedHoverButton, itemList, linkTabStyle, list, paddedBorderTabStyle, parseHtmlString as processHtmlString, transitionComposer, useAction, useChildren, useColumns, useComponent, useComponentDescriptor, useComponentNode, useComponentPlatform, useContainer, useContext, useDispatch, useEventListener, useEvents, useIsMounted, useKeyPress, useLayout, usePrevious, useProperties, useRenderState, useRouteData, useRouter, useScroll, useSettings, useToggle, useTransitionEnd, useUniqueMenu, useWidgetEvent };
 //# sourceMappingURL=index.js.map