@telia-ace/widget-components-widget-header 0.0.1

package/avatar.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { ActionNode } from './widget-header-component';
+
+type Props = {
+    node: ActionNode;
+};
+declare const Avatar: React.FC<Props>;
+export default Avatar;

package/back.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { ActionNode } from './widget-header-component';
+
+type Props = {
+    node: ActionNode;
+};
+declare const Back: React.FC<Props>;
+export default Back;

package/close.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { ActionNode } from './widget-header-component';
+
+type Props = {
+    node: ActionNode;
+};
+declare const Close: React.FC<Props>;
+export default Close;

package/index-c6acaf7f.mjs

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

package/index-cc8580b8.js

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

package/index.d.ts

@@ -0,0 +1,3 @@
+import { default as WidgetHeaderComponent } from './widget-header-component';
+
+export default WidgetHeaderComponent;

package/index.js

@@ -0,0 +1 @@
+"use strict";const e=require("./index-cc8580b8.js");require("@telia-ace/widget-core");require("@telia-ace/widget-ui");require("@telia-ace/widget-utilities");module.exports=e.WidgetHeaderComponent;

package/index.mjs

@@ -0,0 +1,7 @@
+import { W as i } from "./index-c6acaf7f.mjs";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-ui";
+import "@telia-ace/widget-utilities";
+export {
+  i as default
+};

package/minimize.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { ActionNode } from './widget-header-component';
+
+type Props = {
+    node: ActionNode;
+};
+declare const Minimize: React.FC<Props>;
+export default Minimize;

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@telia-ace/widget-components-widget-header",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@telia-ace/widget-core": "*",
+    "@telia-ace/widget-routing": "*",
+    "@telia-ace/widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@webprovisions/platform": "^1.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  }
+}

package/utils.d.ts

@@ -0,0 +1,10 @@
+import { Container } from '@webprovisions/platform';
+import { ActionNode } from './widget-header-component';
+
+export declare const calculateMargin: (leftNodes: ActionNode[], rightNodes: ActionNode[], textAlign: string) => {
+    [x: string]: string;
+};
+export declare const createNodes: (actions: {
+    [key: string]: ActionNode;
+}) => [ActionNode[], ActionNode[]];
+export declare const isOnInitialRoute: (container: Container) => Promise<boolean>;

package/widget-header-0108235e.mjs

@@ -0,0 +1,239 @@
+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 w, linkTabStyle as C } from "@telia-ace/widget-ui";
+import { appendClassNames as T } from "@telia-ace/widget-utilities";
+import { c as A, a as W } from "./index-c6acaf7f.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 s = parseInt(e.size, 10);
+    isNaN(s) || (t = s);
+  }
+  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: s, padding: m, type: n, tooltip: a, show: g = !0 } = t;
+  return n === "back" ? /* @__PURE__ */ i($, { size: s || "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,
+        {
+          "data-testid": "back-button",
+          title: a,
+          "aria-label": a,
+          animationCss: p,
+          onClick: () => {
+            r("back");
+          },
+          children: /* @__PURE__ */ i(M, { node: t })
+        }
+      )
+    }
+  ) }) : g ? /* @__PURE__ */ u(
+    $,
+    {
+      size: s || "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: s,
+    route: m,
+    tooltip: n = "",
+    actions: a = {},
+    textAlign: g = "center"
+  } = S(), [d, p] = A(a);
+  return d.sort((o, l) => (o.order || 0) - (l.order || 0)), p.sort((o, l) => (o.order || 0) - (l.order || 0)), /* @__PURE__ */ u(
+    L,
+    {
+      ...t,
+      className: T(e, "humany-widget-header"),
+      children: [
+        d.map((o, l) => /* @__PURE__ */ i(x, { ...o }, `${o.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 }),
+              s && /* @__PURE__ */ i(R, { children: s })
+            ]
+          }
+        ),
+        p.map((o, l) => /* @__PURE__ */ i(x, { ...o }, `${o.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};
+  overflow: auto;
+  max-height: 100%;
+  margin-right: ${(e) => e.margin.right || 0};
+  margin-left: ${(e) => e.margin.left || 0};
+`, D = c(w)`
+  text-decoration: none;
+  &:focus-visible {
+    ${(e) => v(e)(
+  "h1",
+  y`
+          ${C(e)}
+          display: inline-block;
+        `
+)}
+  }
+`;
+export {
+  O as default
+};

package/widget-header-5e78c0ec.js

@@ -0,0 +1,80 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("@emotion/react"),m=require("@emotion/styled"),r=require("@telia-ace/widget-ui"),$=require("@telia-ace/widget-utilities"),b=require("./index-cc8580b8.js");require("@telia-ace/widget-core");const f=({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(j,{symbol:e.symbol,svg:s,size:t,backgroundSize:"cover"})},j=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&&p.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})},k=({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})},S=({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(v,{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:(x,h)=>i.jsx(u,{"data-testid":"back-button",title:l,"aria-label":l,animationCss:h,onClick:()=>{s("back")},children:i.jsx(z,{node:t})})})}):d?i.jsxs(v,{size:o||"64px",padding:g||"10px",squareRatio:a==="avatar",children:[a==="avatar"&&i.jsx(f,{node:t}),a==="close"&&i.jsx(u,{title:l,"aria-label":l,onClick:()=>{s("close")},children:i.jsx(k,{node:t})}),a==="minimize"&&i.jsx(u,{title:l,"aria-label":l,onClick:()=>{s("minimize")},children:i.jsx(S,{node:t})})]}):null},v=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;
+  }
+`,u=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(),[x,h]=b.createNodes(l);return x.sort((n,c)=>(n.order||0)-(c.order||0)),h.sort((n,c)=>(n.order||0)-(c.order||0)),i.jsxs(w,{...t,className:$.appendClassNames(e,"humany-widget-header"),children:[x.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`)),i.jsxs(C,{textAlign:d,margin:b.calculateMargin(x,h,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})]}),h.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",p.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};
+  overflow: auto;
+  max-height: 100%;
+  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",p.css`
+          ${r.linkTabStyle(e)}
+          display: inline-block;
+        `)}
+  }
+`;exports.default=N;

package/widget-header-component.d.ts

@@ -0,0 +1,31 @@
+import { Container } from '@webprovisions/platform';
+
+export type Symbol = {
+    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
+    content: string;
+};
+export type ActionNode = {
+    type: string;
+    label?: string;
+    position?: 'right' | 'left';
+    symbol?: Symbol;
+    size: string;
+    padding: string;
+    tooltip?: string;
+    order?: number;
+    show?: boolean;
+};
+export type WidgetHeaderComponentProps = {
+    header: string;
+    tagline: string;
+    textAlign?: string;
+    actions?: {
+        [key: string]: ActionNode;
+    };
+    tooltip?: string;
+    tooltipBackLabel?: string;
+    tooltipMinimizeLabel?: string;
+    route?: string;
+};
+declare const WidgetHeaderComponent: (container: Container) => Promise<void>;
+export default WidgetHeaderComponent;

package/widget-header.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+type Props = {
+    className: string;
+    role?: string;
+};
+declare const WidgetHeader: React.FC<Props>;
+export default WidgetHeader;