@telia-ace/widget-components-widget-header 1.1.1-rc.1 → 1.1.1-rc.3

package/widget-header-0370023d.js

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

package/widget-header-6ff6cb4a.mjs

@@ -1,362 +0,0 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { c as f, C as k, u as K, a as T, b as E, d as j, T as A, n as g, S as h, e as P, f as B, g as D, h as I, i as v, j as w, L as W, l as X } from "./index-addbd6d9.mjs";
-import { useContext as N, useState as z, useEffect as Y } from "react";
-import "react-dom";
-const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting" || t === "exited", p = {
-  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((s) => p[s] ? p[s].in : "")}
-                    transition: ${m} ${i.duration}ms ${i.easing};
-                ` : "";
-    const r = n && n.length > 0 && f`
-                ${n.map((s) => p[s] ? p[s].out : "")}
-            `;
-    if (L(t)) {
-      const s = c.transitionKeys.split(" ");
-      return s && s.length > 0 && t === "exiting" ? f`
-                    ${r};
-                    ${s.map((o) => p[o] ? p[o].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) => p[t]
-}, O = () => N(k), H = () => {
-  const t = K(), e = O(), [i, c] = z([]), [n, m] = z();
-  return Y(() => {
-    if (t && e) {
-      const r = new T(t).withId(e.id), s = t.actions(r, e.type || E());
-      m(s), i !== null && (i.forEach((o) => {
-        s.dispatch(o.key, o.data).then((l) => o.resolve(l)).catch((l) => o.reject(l));
-      }), c(null));
-    }
-  }, [t, e.id]), (r, s) => i !== null ? new Promise((o, l) => {
-    i.push({
-      key: r,
-      data: s,
-      resolve: o,
-      reject: l
-    });
-  }) : n.dispatch(r, s);
-}, Q = () => N(j), R = (t) => {
-  const {
-    in: e,
-    mountOnEnter: i = !0,
-    unmountOnExit: c = !0,
-    timeout: n,
-    children: m,
-    transitions: r
-  } = t, o = (() => {
-    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: d, exit: $ } = r;
-        return {
-          enter: {
-            transitionKeys: (l = r.enter) == null ? void 0 : l.type,
-            duration: n ? typeof n == "number" ? n : n.enter : 200,
-            easing: d.easing ? d.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(
-    A,
-    {
-      timeout: {
-        enter: o && o.enter.duration || 0,
-        exit: o && o.exit.duration || 0
-      },
-      in: e,
-      appear: !0,
-      mountOnEnter: i,
-      unmountOnExit: c,
-      onEnter: (l) => l.clientHeight,
-      children: (l) => m && m(l, o && b.compose(l, o))
-    }
-  );
-}, _ = ({ 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: s = !0 } = e;
-  return m === "back" ? /* @__PURE__ */ a(S, { size: c || "64px", padding: n || "10px", children: /* @__PURE__ */ a(
-    R,
-    {
-      in: s,
-      timeout: 300,
-      transitions: {
-        enter: {
-          type: "scale",
-          easing: "cubic-bezier(.08,.84,.74,1.84)"
-        },
-        exit: {
-          type: "scale",
-          easing: "ease-out"
-        }
-      },
-      children: (o, l) => /* @__PURE__ */ a(
-        y,
-        {
-          title: r,
-          "aria-label": r,
-          animationCss: l,
-          onClick: () => {
-            i("back");
-          },
-          children: /* @__PURE__ */ a(F, { node: e })
-        }
-      )
-    }
-  ) }) : s ? /* @__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;
-}};
-    }
-`, ot = ({ className: t, ...e }) => {
-  const {
-    header: i,
-    tagline: c,
-    route: n,
-    tooltip: m = "",
-    actions: r = {},
-    textAlign: s = "center"
-  } = Q(), [o, l] = B(r);
-  return o.sort((u, d) => (u.order || 0) - (d.order || 0)), l.sort((u, d) => (u.order || 0) - (d.order || 0)), /* @__PURE__ */ x(U, { ...e, className: D(t, "humany-widget-header"), children: [
-    o.map((u, d) => /* @__PURE__ */ a(C, { ...u }, `${u.type}+_${d}`)),
-    /* @__PURE__ */ x(
-      tt,
-      {
-        textAlign: s,
-        margin: I(o, l, s),
-        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, d) => /* @__PURE__ */ a(C, { ...u }, `${u.type}+_${d}`))
-  ] });
-}, 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(W)`
-    text-decoration: none;
-    &:focus-visible {
-        ${(t) => w(t)(
-  "h1",
-  f`
-                    ${X(t)}
-                    display: inline-block;
-                `
-)}
-    }
-`;
-export {
-  ot as default
-};