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

package/index-8f0189a9.js

@@ -0,0 +1 @@
+"use strict";const b=require("@telia-ace/widget-core"),f=require("@telia-ace/widget-ui"),h=require("@telia-ace/widget-utilities"),p=(s,t,n)=>{if(n!=="center")return{};const e=c=>c.reduce((u,d)=>{const[l]=d.padding.split("px"),[g]=d.size.split("px");return u+(+g+ +l*2)},0),o=e(s),a=e(t),r=o-a;return r===0?{}:{[o>a?"right":"left"]:`${Math.abs(r)}px`}},w=s=>Object.keys(s).reduce((t,n)=>{const e=s[n];if(!e)return t;const[o,a]=t,r=e.position==="left"?o:a;return s[n].symbol,r.push({symbol:e.symbol&&typeof e.symbol=="string"?{type:"Uri",content:e.symbol}:e.symbol,type:n,padding:e.padding||"10px",label:e.label,size:e.size||"64px",tooltip:e.tooltip,order:e.order||0,show:e.show}),t},[[],[]]),k=s=>s.getAsync("router").then(t=>{if(!t)return!0;const n=t.getInitialRoute(),{name:e,params:o}=t.getRouteData();return h.removeNullAndUndefinedValues(o),!((n==null?void 0:n.name)!==e||Object.keys(o).length>0)}),y=s=>f.createReactComponent(s,"widget-header",Promise.resolve().then(()=>require("./widget-header-393b5e28.js")),t=>{const{events:n}=s.get("$widget"),[e,o]=b.createEventSubscriber(n),{actions:a={}}=t.properties();if(t.actions.create("close",(r,i)=>i.preventDefault?void 0:s.get("$widget").invoke("close")),t.actions.create("back",(r,i)=>{if(!i.preventDefault)return s.getAsync("router").then(c=>{c.goBack()})}),t.properties(r=>{const{actions:i={}}=r;if(i.back)return Object.keys(i).forEach(c=>{const u=i[c];c==="back"&&(u.show=r.showBack)}),{actions:i}}),t.actions.create("show-back",r=>{t.writeProperties({showBack:r})}),a.back){const r=()=>k(s).then(i=>t.actions.dispatch("show-back",!i));r(),e("router:changed",r)}return t.actions.create("minimize",(r,i)=>i.preventDefault?void 0:s.get("$widget").invoke("hide")),()=>{o()}});exports.WidgetHeaderComponent=y;exports.calculateMargin=p;exports.createNodes=w;

package/index-cc80e958.mjs

@@ -0,0 +1,72 @@
+import { createEventSubscriber as p } from "@telia-ace/widget-core";
+import { createReactComponent as f } from "@telia-ace/widget-ui";
+import { removeNullAndUndefinedValues as b } from "@telia-ace/widget-utilities";
+const y = (s, e, n) => {
+  if (n !== "center")
+    return {};
+  const t = (a) => a.reduce((u, d) => {
+    const [l] = d.padding.split("px"), [g] = d.size.split("px");
+    return u + (+g + +l * 2);
+  }, 0), o = t(s), c = t(e), r = o - c;
+  return r === 0 ? {} : {
+    [o > c ? "right" : "left"]: `${Math.abs(r)}px`
+  };
+}, v = (s) => Object.keys(s).reduce(
+  (e, n) => {
+    const t = s[n];
+    if (!t)
+      return e;
+    const [o, c] = e, r = t.position === "left" ? o : c;
+    return s[n].symbol, r.push({
+      symbol: t.symbol && typeof t.symbol == "string" ? { type: "Uri", content: t.symbol } : t.symbol,
+      type: n,
+      padding: t.padding || "10px",
+      label: t.label,
+      size: t.size || "64px",
+      tooltip: t.tooltip,
+      order: t.order || 0,
+      show: t.show
+    }), e;
+  },
+  [[], []]
+), h = (s) => s.getAsync("router").then((e) => {
+  if (!e)
+    return !0;
+  const n = e.getInitialRoute(), { name: t, params: o } = e.getRouteData();
+  return b(o), !((n == null ? void 0 : n.name) !== t || Object.keys(o).length > 0);
+}), z = (s) => f(
+  s,
+  "widget-header",
+  import("./widget-header-3dd8c261.mjs"),
+  (e) => {
+    const { events: n } = s.get("$widget"), [t, o] = p(n), { actions: c = {} } = e.properties();
+    if (e.actions.create("close", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("close")), e.actions.create("back", (r, i) => {
+      if (!i.preventDefault)
+        return s.getAsync("router").then((a) => {
+          a.goBack();
+        });
+    }), e.properties((r) => {
+      const { actions: i = {} } = r;
+      if (i.back)
+        return Object.keys(i).forEach((a) => {
+          const u = i[a];
+          a === "back" && (u.show = r.showBack);
+        }), { actions: i };
+    }), e.actions.create("show-back", (r) => {
+      e.writeProperties({ showBack: r });
+    }), c.back) {
+      const r = () => h(s).then(
+        (i) => e.actions.dispatch("show-back", !i)
+      );
+      r(), t("router:changed", r);
+    }
+    return e.actions.create("minimize", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("hide")), () => {
+      o();
+    };
+  }
+);
+export {
+  z as W,
+  y as a,
+  v as c
+};

package/index.js

@@ -1 +1 @@
-"use strict";const e=require("./index-f80d12f5.js");require("@emotion/react");require("react/jsx-runtime");require("react");require("@emotion/styled");require("react-transition-group");require("react-dom");require("react-router-dom");module.exports=e.WidgetHeaderComponent;
+"use strict";const e=require("./index-8f0189a9.js");require("@telia-ace/widget-core");require("@telia-ace/widget-ui");require("@telia-ace/widget-utilities");module.exports=e.WidgetHeaderComponent;

package/index.mjs

@@ -1,11 +1,7 @@
-import { W as d } from "./index-8825e52f.mjs";
-import "@emotion/react";
-import "react/jsx-runtime";
-import "react";
-import "@emotion/styled";
-import "react-transition-group";
-import "react-dom";
-import "react-router-dom";
+import { W as i } from "./index-cc80e958.mjs";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-ui";
+import "@telia-ace/widget-utilities";
 export {
-  d as default
+  i as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-components-widget-header",
-  "version": "1.1.1-rc.2",
+  "version": "1.1.1-rc.4",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -10,10 +10,10 @@
     }
   },
   "dependencies": {
-    "@telia-ace/widget-core": "^1.1.1-rc.2",
-    "@telia-ace/widget-routing": "^1.1.1-rc.2",
-    "@telia-ace/widget-ui": "^1.1.1-rc.2",
-    "@telia-ace/widget-utilities": "^1.1.1-rc.2",
+    "@telia-ace/widget-core": "^1.1.1-rc.4",
+    "@telia-ace/widget-routing": "^1.1.1-rc.4",
+    "@telia-ace/widget-ui": "^1.1.1-rc.4",
+    "@telia-ace/widget-utilities": "^1.1.1-rc.4",
     "@webprovisions/platform": "^1.1.4"
   },
   "peerDependencies": {

package/widget-header-393b5e28.js

@@ -0,0 +1,79 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("@emotion/react"),m=require("@emotion/styled"),r=require("@telia-ace/widget-ui"),v=require("@telia-ace/widget-utilities"),b=require("./index-8f0189a9.js");require("@telia-ace/widget-core");const j=({node:e})=>{if(!e.symbol)return null;let t;const s=e.symbol.type==="Svg";if(e.symbol.type==="Svg"){const o=parseInt(e.size,10);isNaN(o)||(t=o)}return i.jsx(f,{symbol:e.symbol,svg:s,size:t,backgroundSize:"cover"})},f=m(({svg:e,...t})=>i.jsx(r.SymbolBadge,{...t}))`
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+    ${e=>!e.svg&&u.css`
+            border-radius: 50%;
+            overflow: hidden;
+        `}
+`,z=({node:e})=>{const t=e.symbol||{type:"Svg",content:"back"};return i.jsx(r.SymbolBadge,{size:20,symbol:t})},S=({node:e})=>{const t=e.symbol||{type:"Svg",content:"close"},s=parseInt(e==null?void 0:e.size,10)||14;return i.jsx(r.SymbolBadge,{size:s,symbol:t})},k=({node:e})=>{const t=e.symbol||{type:"Svg",content:"minimize"},s=parseInt(e==null?void 0:e.size,10)||20;return i.jsx(r.SymbolBadge,{size:s,symbol:t})},y=({className:e="",...t})=>{const s=r.useDispatch(),{size:o,padding:g,type:a,tooltip:l,show:d=!0}=t;return a==="back"?i.jsx($,{size:o||"64px",padding:g||"10px",children:i.jsx(r.TransitionComponent,{in:d,timeout:300,transitions:{enter:{type:"scale",easing:"cubic-bezier(.08,.84,.74,1.84)"},exit:{type:"scale",easing:"ease-out"}},children:(h,x)=>i.jsx(p,{title:l,"aria-label":l,animationCss:x,onClick:()=>{s("back")},children:i.jsx(z,{node:t})})})}):d?i.jsxs($,{size:o||"64px",padding:g||"10px",squareRatio:a==="avatar",children:[a==="avatar"&&i.jsx(j,{node:t}),a==="close"&&i.jsx(p,{title:l,"aria-label":l,onClick:()=>{s("close")},children:i.jsx(S,{node:t})}),a==="minimize"&&i.jsx(p,{title:l,"aria-label":l,onClick:()=>{s("minimize")},children:i.jsx(k,{node:t})})]}):null},$=m.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;
+    }
+`,p=m.button`
+    ${e=>!!e.animationCss&&e.animationCss};
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    &:focus-visible {
+        ${r.borderTabStyle};
+        border-color: ${e=>{var t,s;return(s=(t=e.theme.accessibility)==null?void 0:t.colors)==null?void 0:s.inactiveText}};
+    }
+`,N=({className:e,...t})=>{const{header:s,tagline:o,route:g,tooltip:a="",actions:l={},textAlign:d="center"}=r.useProperties(),[h,x]=b.createNodes(l);return h.sort((n,c)=>(n.order||0)-(c.order||0)),x.sort((n,c)=>(n.order||0)-(c.order||0)),i.jsxs(w,{...t,className:v.appendClassNames(e,"humany-widget-header"),children:[h.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`)),i.jsxs(C,{textAlign:d,margin:b.calculateMargin(h,x,d),children:[g?i.jsx(T,{routeName:g,title:a,"aria-label":a,children:i.jsx(r.Typography,{variant:"h1",children:s})}):i.jsx(r.Typography,{variant:"h1",children:s}),o&&i.jsx(q,{children:o})]}),x.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`))]})},w=m.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    ${e=>{var t,s;return r.headingElement(e)("h1",u.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}};
+        }
+    }
+`,q=m.p`
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+    font-weight: 300;
+`,C=m.div`
+    flex: 1;
+    text-align: ${e=>e.textAlign};
+
+    margin-right: ${e=>e.margin.right||0};
+    margin-left: ${e=>e.margin.left||0};
+`,T=m(r.Link)`
+    text-decoration: none;
+    &:focus-visible {
+        ${e=>r.headingElement(e)("h1",u.css`
+                    ${r.linkTabStyle(e)}
+                    display: inline-block;
+                `)}
+    }
+`;exports.default=N;

package/widget-header-3dd8c261.mjs

@@ -0,0 +1,222 @@
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
+import { css as y } from "@emotion/react";
+import c from "@emotion/styled";
+import { SymbolBadge as h, borderTabStyle as z, useDispatch as k, TransitionComponent as N, useProperties as S, Typography as f, headingElement as v, Link as C, linkTabStyle as w } from "@telia-ace/widget-ui";
+import { appendClassNames as T } from "@telia-ace/widget-utilities";
+import { c as A, a as W } from "./index-cc80e958.mjs";
+import "@telia-ace/widget-core";
+const B = ({ node: e }) => {
+  if (!e.symbol)
+    return null;
+  let t;
+  const r = e.symbol.type === "Svg";
+  if (e.symbol.type === "Svg") {
+    const o = parseInt(e.size, 10);
+    isNaN(o) || (t = o);
+  }
+  return /* @__PURE__ */ i(I, { symbol: e.symbol, svg: r, size: t, backgroundSize: "cover" });
+}, I = c(({ svg: e, ...t }) => /* @__PURE__ */ i(h, { ...t }))`
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    ${(e) => !e.svg && y`
+            border-radius: 50%;
+            overflow: hidden;
+        `}
+`, M = ({ node: e }) => {
+  const t = e.symbol || { type: "Svg", content: "back" };
+  return /* @__PURE__ */ i(h, { size: 20, symbol: t });
+}, j = ({ node: e }) => {
+  const t = e.symbol || { type: "Svg", content: "close" }, r = parseInt(e == null ? void 0 : e.size, 10) || 14;
+  return /* @__PURE__ */ i(h, { size: r, symbol: t });
+}, q = ({ node: e }) => {
+  const t = e.symbol || { type: "Svg", content: "minimize" }, r = parseInt(e == null ? void 0 : e.size, 10) || 20;
+  return /* @__PURE__ */ i(h, { size: r, symbol: t });
+}, x = ({ className: e = "", ...t }) => {
+  const r = k(), { size: o, padding: m, type: n, tooltip: a, show: g = !0 } = t;
+  return n === "back" ? /* @__PURE__ */ i($, { size: o || "64px", padding: m || "10px", children: /* @__PURE__ */ i(
+    N,
+    {
+      in: g,
+      timeout: 300,
+      transitions: {
+        enter: {
+          type: "scale",
+          easing: "cubic-bezier(.08,.84,.74,1.84)"
+        },
+        exit: {
+          type: "scale",
+          easing: "ease-out"
+        }
+      },
+      children: (d, p) => /* @__PURE__ */ i(
+        b,
+        {
+          title: a,
+          "aria-label": a,
+          animationCss: p,
+          onClick: () => {
+            r("back");
+          },
+          children: /* @__PURE__ */ i(M, { node: t })
+        }
+      )
+    }
+  ) }) : g ? /* @__PURE__ */ u(
+    $,
+    {
+      size: o || "64px",
+      padding: m || "10px",
+      squareRatio: n === "avatar",
+      children: [
+        n === "avatar" && /* @__PURE__ */ i(B, { node: t }),
+        n === "close" && /* @__PURE__ */ i(
+          b,
+          {
+            title: a,
+            "aria-label": a,
+            onClick: () => {
+              r("close");
+            },
+            children: /* @__PURE__ */ i(j, { node: t })
+          }
+        ),
+        n === "minimize" && /* @__PURE__ */ i(
+          b,
+          {
+            title: a,
+            "aria-label": a,
+            onClick: () => {
+              r("minimize");
+            },
+            children: /* @__PURE__ */ i(q, { node: t })
+          }
+        )
+      ]
+    }
+  ) : null;
+}, $ = c.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;
+    }
+`, b = c.button`
+    ${(e) => !!e.animationCss && e.animationCss};
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    &:focus-visible {
+        ${z};
+        border-color: ${(e) => {
+  var t, r;
+  return (r = (t = e.theme.accessibility) == null ? void 0 : t.colors) == null ? void 0 : r.inactiveText;
+}};
+    }
+`, O = ({ className: e, ...t }) => {
+  const {
+    header: r,
+    tagline: o,
+    route: m,
+    tooltip: n = "",
+    actions: a = {},
+    textAlign: g = "center"
+  } = S(), [d, p] = A(a);
+  return d.sort((s, l) => (s.order || 0) - (l.order || 0)), p.sort((s, l) => (s.order || 0) - (l.order || 0)), /* @__PURE__ */ u(L, { ...t, className: T(e, "humany-widget-header"), children: [
+    d.map((s, l) => /* @__PURE__ */ i(x, { ...s }, `${s.type}+_${l}`)),
+    /* @__PURE__ */ u(
+      _,
+      {
+        textAlign: g,
+        margin: W(d, p, g),
+        children: [
+          m ? /* @__PURE__ */ i(D, { routeName: m, title: n, "aria-label": n, children: /* @__PURE__ */ i(f, { variant: "h1", children: r }) }) : /* @__PURE__ */ i(f, { variant: "h1", children: r }),
+          o && /* @__PURE__ */ i(R, { children: o })
+        ]
+      }
+    ),
+    p.map((s, l) => /* @__PURE__ */ i(x, { ...s }, `${s.type}+_${l}`))
+  ] });
+}, L = c.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    ${(e) => {
+  var t, r;
+  return v(e)(
+    "h1",
+    y`
+                font-size: ${(t = e.theme.fonts) == null ? void 0 : t.huge};
+                margin: 0;
+                font-weight: 300;
+                color: ${(r = e.theme.colors) == null ? void 0 : r.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;
+}};
+        }
+    }
+`, R = c.p`
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    font-weight: 300;
+`, _ = c.div`
+    flex: 1;
+    text-align: ${(e) => e.textAlign};
+
+    margin-right: ${(e) => e.margin.right || 0};
+    margin-left: ${(e) => e.margin.left || 0};
+`, D = c(C)`
+    text-decoration: none;
+    &:focus-visible {
+        ${(e) => v(e)(
+  "h1",
+  y`
+                    ${w(e)}
+                    display: inline-block;
+                `
+)}
+    }
+`;
+export {
+  O as default
+};