@telia-ace/widget-components-widget-header 1.1.1-rc.2 → 1.1.1-rc.4

package/widget-header-b177d340.js

@@ -1,88 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),x=require("@emotion/react"),f=require("@emotion/styled"),l=require("./index-f80d12f5.js"),h=require("react");require("react-dom");const z=require("react-transition-group");require("react-router-dom");const S=e=>e==="entering"||e==="entered",C=e=>e==="exiting"||e==="exited",g={fade:{in:"opacity: 1;",out:"opacity: 0;"},"slide-left":{in:"transform: translateX(0);",out:"transform: translateX(-100%);"},"slide-right":{in:"transform: translateX(0);",out:"transform: translateX(100%);"},"slide-up":{in:"transform: translateY(0);",out:"transform: translateY(100%);"},"slide-down":{in:"transform: translateY(0);",out:"transform: translateY(-100%);"},scale:{in:"transform: scale(1);",out:"transform: scale(0);"}},w=["slide-up","slide-down","slide-left","slide-right","scale"],b={compose:(e="exited",t)=>{const{enter:i,exit:u}=t,n=i.transitionKeys.split(" "),m=w.indexOf(n[0])>-1?"transform":"opacity";if(S(e))return n&&n.length>0?x.css`
-                    ${n&&n.length>0&&n.map(o=>g[o]?g[o].in:"")}
-                    transition: ${m} ${i.duration}ms ${i.easing};
-                `:"";const s=n&&n.length>0&&x.css`
-                ${n.map(o=>g[o]?g[o].out:"")}
-            `;if(C(e)){const o=u.transitionKeys.split(" ");return o&&o.length>0&&e==="exiting"?x.css`
-                    ${s};
-                    ${o.map(a=>g[a]?g[a].out:"")}
-                    transition: ${m} ${u.duration}ms ${u.easing};
-                `:s}},composeViewTransition:(e,t,i)=>{if(t==="slide")return b.compose(e,{enter:{transitionKeys:i==="forth"?"slide-right":"slide-left",duration:500},exit:{transitionKeys:i==="forth"?"slide-left":"slide-right",duration:500}});if(t==="fade")return b.compose(e,{enter:{transitionKeys:"fade",duration:500},exit:{transitionKeys:"fade",duration:500}})},get:e=>g[e]},N=()=>h.useContext(l.ComponentNodeContext),T=()=>{const e=l.useComponentPlatform(),t=N(),[i,u]=h.useState([]),[n,m]=h.useState();return h.useEffect(()=>{if(e&&t){const s=new l.ComponentQuery(e).withId(t.id),o=e.actions(s,t.type||l.uuid());m(o),i!==null&&(i.forEach(a=>{o.dispatch(a.key,a.data).then(c=>a.resolve(c)).catch(c=>a.reject(c))}),u(null))}},[e,t.id]),(s,o)=>i!==null?new Promise((a,c)=>{i.push({key:s,data:o,resolve:a,reject:c})}):n.dispatch(s,o)},k=()=>h.useContext(l.ComponentPropertyContext),K=e=>{const{in:t,mountOnEnter:i=!0,unmountOnExit:u=!0,timeout:n,children:m,transitions:s}=e,a=(()=>{var c,d;if(!(!s||s==="none")){if(typeof s=="string")return{enter:{transitionKeys:s,duration:n?typeof n=="number"?n:n.enter:200,easing:"ease-in"},exit:{transitionKeys:s,duration:n?typeof n=="number"?n:n.exit:200,easing:"ease-out"}};if(typeof s=="object"){const{enter:p,exit:$}=s;return{enter:{transitionKeys:(c=s.enter)==null?void 0:c.type,duration:n?typeof n=="number"?n:n.enter:200,easing:p.easing?p.easing:"ease-in"},exit:{transitionKeys:(d=s.enter)==null?void 0:d.type,duration:n?typeof n=="number"?n:n.enter:200,easing:$.easing?$.easing:"ease-out"}}}}})();return r.jsx(z.Transition,{timeout:{enter:a&&a.enter.duration||0,exit:a&&a.exit.duration||0},in:t,appear:!0,mountOnEnter:i,unmountOnExit:u,onEnter:c=>c.clientHeight,children:c=>m&&m(c,a&&b.compose(c,a))})},q=({node:e})=>{if(!e.symbol)return null;let t;const i=e.symbol.type==="Svg";if(e.symbol.type==="Svg"){const u=parseInt(e.size,10);isNaN(u)||(t=u)}return r.jsx(E,{symbol:e.symbol,svg:i,size:t,backgroundSize:"cover"})},E=f(({svg:e,...t})=>r.jsx(l.SymbolBadge,{...t}))`
-    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
-    ${e=>!e.svg&&x.css`
-            border-radius: 50%;
-            overflow: hidden;
-        `}
-`,B=({node:e})=>{const t=e.symbol||{type:"Svg",content:"back"};return r.jsx(l.SymbolBadge,{size:20,symbol:t})},P=({node:e})=>{const t=e.symbol||{type:"Svg",content:"close"},i=parseInt(e==null?void 0:e.size,10)||14;return r.jsx(l.SymbolBadge,{size:i,symbol:t})},A=({node:e})=>{const t=e.symbol||{type:"Svg",content:"minimize"},i=parseInt(e==null?void 0:e.size,10)||20;return r.jsx(l.SymbolBadge,{size:i,symbol:t})},j=({className:e="",...t})=>{const i=T(),{size:u,padding:n,type:m,tooltip:s,show:o=!0}=t;return m==="back"?r.jsx(v,{size:u||"64px",padding:n||"10px",children:r.jsx(K,{in:o,timeout:300,transitions:{enter:{type:"scale",easing:"cubic-bezier(.08,.84,.74,1.84)"},exit:{type:"scale",easing:"ease-out"}},children:(a,c)=>r.jsx(y,{title:s,"aria-label":s,animationCss:c,onClick:()=>{i("back")},children:r.jsx(B,{node:t})})})}):o?r.jsxs(v,{size:u||"64px",padding:n||"10px",squareRatio:m==="avatar",children:[m==="avatar"&&r.jsx(q,{node:t}),m==="close"&&r.jsx(y,{title:s,"aria-label":s,onClick:()=>{i("close")},children:r.jsx(P,{node:t})}),m==="minimize"&&r.jsx(y,{title:s,"aria-label":s,onClick:()=>{i("minimize")},children:r.jsx(A,{node:t})})]}):null},v=f.div`
-    flex: 1;
-    max-width: ${e=>e.size};
-    ${e=>e.squareRatio&&`max-height: ${e.size};`}
-    text-align: center;
-    padding: 0 ${e=>e.padding};
-    && {
-        box-sizing: content-box;
-    }
-
-    svg {
-        vertical-align: middle;
-    }
-
-    i {
-        color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
-        font-size: ${e=>e.size};
-        min-width: 1em;
-        min-height: 1em;
-        display: inline-block;
-    }
-`,y=f.button`
-    ${e=>!!e.animationCss&&e.animationCss};
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    &:focus-visible {
-        ${l.borderTabStyle};
-        border-color: ${e=>{var t,i;return(i=(t=e.theme.accessibility)==null?void 0:t.colors)==null?void 0:i.inactiveText}};
-    }
-`,D=({className:e,...t})=>{const{header:i,tagline:u,route:n,tooltip:m="",actions:s={},textAlign:o="center"}=k(),[a,c]=l.createNodes(s);return a.sort((d,p)=>(d.order||0)-(p.order||0)),c.sort((d,p)=>(d.order||0)-(p.order||0)),r.jsxs(I,{...t,className:l.appendClassNames(e,"humany-widget-header"),children:[a.map((d,p)=>r.jsx(j,{...d},`${d.type}+_${p}`)),r.jsxs(O,{textAlign:o,margin:l.calculateMargin(a,c,o),children:[n?r.jsx(R,{routeName:n,title:m,"aria-label":m,children:r.jsx(l.Typography,{variant:"h1",children:i})}):r.jsx(l.Typography,{variant:"h1",children:i}),u&&r.jsx(M,{children:u})]}),c.map((d,p)=>r.jsx(j,{...d},`${d.type}+_${p}`))]})},I=f.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    ${e=>{var t,i;return l.headingElement(e)("h1",x.css`
-                font-size: ${(t=e.theme.fonts)==null?void 0:t.huge};
-                margin: 0;
-                font-weight: 300;
-                color: ${(i=e.theme.colors)==null?void 0:i.text};
-            `)}}
-
-    p {
-        color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
-        margin: 0;
-    }
-
-    svg {
-        line,
-        path,
-        circle {
-            stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
-        }
-    }
-`,M=f.p`
-    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
-    font-weight: 300;
-`,O=f.div`
-    flex: 1;
-    text-align: ${e=>e.textAlign};
-
-    margin-right: ${e=>e.margin.right||0};
-    margin-left: ${e=>e.margin.left||0};
-`,R=f(l.Link)`
-    text-decoration: none;
-    &:focus-visible {
-        ${e=>l.headingElement(e)("h1",x.css`
-                    ${l.linkTabStyle(e)}
-                    display: inline-block;
-                `)}
-    }
-`;exports.default=D;

package/widget-header-d82a1b88.mjs

@@ -1,366 +0,0 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { css as f } from "@emotion/react";
-import g from "@emotion/styled";
-import { C as k, u as K, a as T, b as E, c as A, S as h, d as P, e as j, f as B, g as D, T as v, h as w, L as I, l as W } from "./index-8825e52f.mjs";
-import { useContext as N, useState as z, useEffect as X } from "react";
-import "react-dom";
-import { Transition as Y } from "react-transition-group";
-import "react-router-dom";
-const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting" || t === "exited", d = {
-  fade: {
-    in: "opacity: 1;",
-    out: "opacity: 0;"
-  },
-  "slide-left": {
-    in: "transform: translateX(0);",
-    out: "transform: translateX(-100%);"
-  },
-  "slide-right": {
-    in: "transform: translateX(0);",
-    out: "transform: translateX(100%);"
-  },
-  "slide-up": {
-    in: "transform: translateY(0);",
-    out: "transform: translateY(100%);"
-  },
-  "slide-down": {
-    in: "transform: translateY(0);",
-    out: "transform: translateY(-100%);"
-  },
-  scale: {
-    in: "transform: scale(1);",
-    out: "transform: scale(0);"
-  }
-}, M = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"], b = {
-  compose: (t = "exited", e) => {
-    const { enter: i, exit: c } = e, n = i.transitionKeys.split(" "), m = M.indexOf(n[0]) > -1 ? "transform" : "opacity";
-    if (q(t))
-      return n && n.length > 0 ? f`
-                    ${n && n.length > 0 && n.map((o) => d[o] ? d[o].in : "")}
-                    transition: ${m} ${i.duration}ms ${i.easing};
-                ` : "";
-    const r = n && n.length > 0 && f`
-                ${n.map((o) => d[o] ? d[o].out : "")}
-            `;
-    if (L(t)) {
-      const o = c.transitionKeys.split(" ");
-      return o && o.length > 0 && t === "exiting" ? f`
-                    ${r};
-                    ${o.map((s) => d[s] ? d[s].out : "")}
-                    transition: ${m} ${c.duration}ms ${c.easing};
-                ` : r;
-    }
-  },
-  composeViewTransition: (t, e, i) => {
-    if (e === "slide")
-      return b.compose(t, {
-        enter: {
-          transitionKeys: i === "forth" ? "slide-right" : "slide-left",
-          duration: 500
-        },
-        exit: {
-          transitionKeys: i === "forth" ? "slide-left" : "slide-right",
-          duration: 500
-        }
-      });
-    if (e === "fade")
-      return b.compose(t, {
-        enter: {
-          transitionKeys: "fade",
-          duration: 500
-        },
-        exit: {
-          transitionKeys: "fade",
-          duration: 500
-        }
-      });
-  },
-  get: (t) => d[t]
-}, O = () => N(k), H = () => {
-  const t = K(), e = O(), [i, c] = z([]), [n, m] = z();
-  return X(() => {
-    if (t && e) {
-      const r = new T(t).withId(e.id), o = t.actions(r, e.type || E());
-      m(o), i !== null && (i.forEach((s) => {
-        o.dispatch(s.key, s.data).then((l) => s.resolve(l)).catch((l) => s.reject(l));
-      }), c(null));
-    }
-  }, [t, e.id]), (r, o) => i !== null ? new Promise((s, l) => {
-    i.push({
-      key: r,
-      data: o,
-      resolve: s,
-      reject: l
-    });
-  }) : n.dispatch(r, o);
-}, Q = () => N(A), R = (t) => {
-  const {
-    in: e,
-    mountOnEnter: i = !0,
-    unmountOnExit: c = !0,
-    timeout: n,
-    children: m,
-    transitions: r
-  } = t, s = (() => {
-    var l, u;
-    if (!(!r || r === "none")) {
-      if (typeof r == "string")
-        return {
-          enter: {
-            transitionKeys: r,
-            duration: n ? typeof n == "number" ? n : n.enter : 200,
-            easing: "ease-in"
-          },
-          exit: {
-            transitionKeys: r,
-            duration: n ? typeof n == "number" ? n : n.exit : 200,
-            easing: "ease-out"
-          }
-        };
-      if (typeof r == "object") {
-        const { enter: p, exit: $ } = r;
-        return {
-          enter: {
-            transitionKeys: (l = r.enter) == null ? void 0 : l.type,
-            duration: n ? typeof n == "number" ? n : n.enter : 200,
-            easing: p.easing ? p.easing : "ease-in"
-          },
-          exit: {
-            transitionKeys: (u = r.enter) == null ? void 0 : u.type,
-            duration: n ? typeof n == "number" ? n : n.enter : 200,
-            easing: $.easing ? $.easing : "ease-out"
-          }
-        };
-      }
-    }
-  })();
-  return /* @__PURE__ */ a(
-    Y,
-    {
-      timeout: {
-        enter: s && s.enter.duration || 0,
-        exit: s && s.exit.duration || 0
-      },
-      in: e,
-      appear: !0,
-      mountOnEnter: i,
-      unmountOnExit: c,
-      onEnter: (l) => l.clientHeight,
-      children: (l) => m && m(l, s && b.compose(l, s))
-    }
-  );
-}, _ = ({ node: t }) => {
-  if (!t.symbol)
-    return null;
-  let e;
-  const i = t.symbol.type === "Svg";
-  if (t.symbol.type === "Svg") {
-    const c = parseInt(t.size, 10);
-    isNaN(c) || (e = c);
-  }
-  return /* @__PURE__ */ a(V, { symbol: t.symbol, svg: i, size: e, backgroundSize: "cover" });
-}, V = g(({ svg: t, ...e }) => /* @__PURE__ */ a(h, { ...e }))`
-    color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
-}};
-    ${(t) => !t.svg && f`
-            border-radius: 50%;
-            overflow: hidden;
-        `}
-`, F = ({ node: t }) => {
-  const e = t.symbol || { type: "Svg", content: "back" };
-  return /* @__PURE__ */ a(h, { size: 20, symbol: e });
-}, G = ({ node: t }) => {
-  const e = t.symbol || { type: "Svg", content: "close" }, i = parseInt(t == null ? void 0 : t.size, 10) || 14;
-  return /* @__PURE__ */ a(h, { size: i, symbol: e });
-}, J = ({ node: t }) => {
-  const e = t.symbol || { type: "Svg", content: "minimize" }, i = parseInt(t == null ? void 0 : t.size, 10) || 20;
-  return /* @__PURE__ */ a(h, { size: i, symbol: e });
-}, C = ({ className: t = "", ...e }) => {
-  const i = H(), { size: c, padding: n, type: m, tooltip: r, show: o = !0 } = e;
-  return m === "back" ? /* @__PURE__ */ a(S, { size: c || "64px", padding: n || "10px", children: /* @__PURE__ */ a(
-    R,
-    {
-      in: o,
-      timeout: 300,
-      transitions: {
-        enter: {
-          type: "scale",
-          easing: "cubic-bezier(.08,.84,.74,1.84)"
-        },
-        exit: {
-          type: "scale",
-          easing: "ease-out"
-        }
-      },
-      children: (s, l) => /* @__PURE__ */ a(
-        y,
-        {
-          title: r,
-          "aria-label": r,
-          animationCss: l,
-          onClick: () => {
-            i("back");
-          },
-          children: /* @__PURE__ */ a(F, { node: e })
-        }
-      )
-    }
-  ) }) : o ? /* @__PURE__ */ x(
-    S,
-    {
-      size: c || "64px",
-      padding: n || "10px",
-      squareRatio: m === "avatar",
-      children: [
-        m === "avatar" && /* @__PURE__ */ a(_, { node: e }),
-        m === "close" && /* @__PURE__ */ a(
-          y,
-          {
-            title: r,
-            "aria-label": r,
-            onClick: () => {
-              i("close");
-            },
-            children: /* @__PURE__ */ a(G, { node: e })
-          }
-        ),
-        m === "minimize" && /* @__PURE__ */ a(
-          y,
-          {
-            title: r,
-            "aria-label": r,
-            onClick: () => {
-              i("minimize");
-            },
-            children: /* @__PURE__ */ a(J, { node: e })
-          }
-        )
-      ]
-    }
-  ) : null;
-}, S = g.div`
-    flex: 1;
-    max-width: ${(t) => t.size};
-    ${(t) => t.squareRatio && `max-height: ${t.size};`}
-    text-align: center;
-    padding: 0 ${(t) => t.padding};
-    && {
-        box-sizing: content-box;
-    }
-
-    svg {
-        vertical-align: middle;
-    }
-
-    i {
-        color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
-}};
-        font-size: ${(t) => t.size};
-        min-width: 1em;
-        min-height: 1em;
-        display: inline-block;
-    }
-`, y = g.button`
-    ${(t) => !!t.animationCss && t.animationCss};
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    &:focus-visible {
-        ${P};
-        border-color: ${(t) => {
-  var e, i;
-  return (i = (e = t.theme.accessibility) == null ? void 0 : e.colors) == null ? void 0 : i.inactiveText;
-}};
-    }
-`, mt = ({ className: t, ...e }) => {
-  const {
-    header: i,
-    tagline: c,
-    route: n,
-    tooltip: m = "",
-    actions: r = {},
-    textAlign: o = "center"
-  } = Q(), [s, l] = j(r);
-  return s.sort((u, p) => (u.order || 0) - (p.order || 0)), l.sort((u, p) => (u.order || 0) - (p.order || 0)), /* @__PURE__ */ x(U, { ...e, className: B(t, "humany-widget-header"), children: [
-    s.map((u, p) => /* @__PURE__ */ a(C, { ...u }, `${u.type}+_${p}`)),
-    /* @__PURE__ */ x(
-      tt,
-      {
-        textAlign: o,
-        margin: D(s, l, o),
-        children: [
-          n ? /* @__PURE__ */ a(et, { routeName: n, title: m, "aria-label": m, children: /* @__PURE__ */ a(v, { variant: "h1", children: i }) }) : /* @__PURE__ */ a(v, { variant: "h1", children: i }),
-          c && /* @__PURE__ */ a(Z, { children: c })
-        ]
-      }
-    ),
-    l.map((u, p) => /* @__PURE__ */ a(C, { ...u }, `${u.type}+_${p}`))
-  ] });
-}, U = g.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    ${(t) => {
-  var e, i;
-  return w(t)(
-    "h1",
-    f`
-                font-size: ${(e = t.theme.fonts) == null ? void 0 : e.huge};
-                margin: 0;
-                font-weight: 300;
-                color: ${(i = t.theme.colors) == null ? void 0 : i.text};
-            `
-  );
-}}
-
-    p {
-        color: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
-}};
-        margin: 0;
-    }
-
-    svg {
-        line,
-        path,
-        circle {
-            stroke: ${(t) => {
-  var e;
-  return (e = t.theme.colors) == null ? void 0 : e.text;
-}};
-        }
-    }
-`, Z = g.p`
-    font-size: ${(t) => {
-  var e;
-  return (e = t.theme.fonts) == null ? void 0 : e.normal;
-}};
-    font-weight: 300;
-`, tt = g.div`
-    flex: 1;
-    text-align: ${(t) => t.textAlign};
-
-    margin-right: ${(t) => t.margin.right || 0};
-    margin-left: ${(t) => t.margin.left || 0};
-`, et = g(I)`
-    text-decoration: none;
-    &:focus-visible {
-        ${(t) => w(t)(
-  "h1",
-  f`
-                    ${W(t)}
-                    display: inline-block;
-                `
-)}
-    }
-`;
-export {
-  mt as default
-};