@telia-ace/widget-components-widget-header 1.0.24-experimental.2 → 1.0.24-experimental.20

package/dist/avatar.d.ts

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

package/dist/back.d.ts

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

package/dist/close.d.ts

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

package/dist/index.js

@@ -1,8 +1,10 @@
-import { W as i } from "./index.74fb7b76.js";
-import "@telia-ace/widget-core";
-import "@telia-ace/widget-ui";
-import "@telia-ace/widget-utilities";
+import { createWebComponent as t } from "@telia-ace/widget-ui";
+const o = (e) => t(
+  e,
+  "widget-header",
+  import("./widget-header-wrapper.c1e324d2.js")
+), n = o;
 export {
-  i as default
+  n as default
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":["../src/widget-header-component.ts"],"sourcesContent":["// import { createEventSubscriber } from '@telia-ace/widget-core';\n// import { RoutingService } from '@telia-ace/widget-routing';\n// import { createReactComponent } from '@telia-ace/widget-ui';\n// import { Container } from '@webprovisions/platform';\n// import { isOnInitialRoute } from './utils';\n\n// export type Symbol = {\n//     type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\n//     content: string;\n// };\n\n// export type ActionNode = {\n//     type: string;\n//     label?: string;\n//     position?: 'right' | 'left';\n//     symbol?: Symbol;\n//     size: string;\n//     padding: string;\n//     tooltip?: string;\n//     order?: number;\n//     show?: boolean;\n// };\n\n// export type WidgetHeaderComponentProps = {\n//     header: string;\n//     tagline: string;\n//     textAlign?: string;\n//     actions?: { [key: string]: ActionNode };\n//     tooltip?: string;\n//     route?: string;\n// };\n\n// const WidgetHeaderComponent = (container: Container) => {\n//     return createReactComponent(\n//         container,\n//         'widget-header',\n//         import('./widget-header'),\n//         (component) => {\n//             const { events } = container.get('$widget');\n//             const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n//             const { actions = {} } = component.properties<WidgetHeaderComponentProps>();\n\n//             component.actions.create('close', (data, options) => {\n//                 if (options.preventDefault) {\n//                     return;\n//                 }\n\n//                 const widget = container.get('$widget');\n//                 return widget.invoke('close');\n//             });\n//             component.actions.create('back', (data, options) => {\n//                 if (options.preventDefault) {\n//                     return;\n//                 }\n\n//                 return container.getAsync('router').then((router: RoutingService) => {\n//                     router.goBack();\n//                 });\n//             });\n\n//             component.properties((properties) => {\n//                 const { actions = {} } = properties;\n\n//                 if (!actions.back) {\n//                     return;\n//                 }\n\n//                 Object.keys(actions).forEach((key) => {\n//                     const node = actions[key];\n//                     if (key === 'back') {\n//                         node.show = properties.showBack;\n//                     }\n//                 });\n\n//                 return { actions };\n//             });\n\n//             component.actions.create('show-back', (showBack) => {\n//                 component.writeProperties({ showBack });\n//             });\n\n//             if (actions.back) {\n//                 const showBack = () =>\n//                     isOnInitialRoute(container).then((onInitialRoute) =>\n//                         component.actions.dispatch('show-back', !onInitialRoute)\n//                     );\n\n//                 showBack();\n//                 subscribe('router:changed', showBack);\n//             }\n\n//             component.actions.create('minimize', (data, options) => {\n//                 if (options.preventDefault) {\n//                     return;\n//                 }\n\n//                 const widget = container.get('$widget');\n//                 return widget.invoke('hide');\n//             });\n\n//             return () => {\n//                 unsubscribe();\n//             };\n//         }\n//     );\n// };\n\n// export default WidgetHeaderComponent;\n\nimport { createWebComponent } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\n\nconst WidgetHeaderComponent = (container: Container) => {\n    return createWebComponent(\n        container,\n        'widget-header',\n        // import('./widget-header')\n        import('./widget-header-wrapper')\n    );\n};\nexport default WidgetHeaderComponent;\n"],"names":["WidgetHeaderComponent","container","createWebComponent","WidgetHeaderComponent$1"],"mappings":";AAiHA,MAAMA,IAAwB,CAACC,MACpBC;AAAA,EACHD;AAAA,EACA;AAAA,EAEA,OAAO;AAAA,GAGfE,IAAeH;"}

package/dist/minimize.d.ts

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

package/dist/node.d.ts

@@ -1,7 +1 @@
-import React from 'react';
-import { ActionNode } from './widget-header-component';
-type Props = Merge<ActionNode, {
-    className?: string;
-}>;
-declare const Node: React.FC<Props>;
-export default Node;
+export declare const test: {};

package/dist/utils.d.ts

@@ -1,9 +1 @@
-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>;
+export declare const test: {};

package/dist/widget-header-component.d.ts

@@ -1,28 +1,3 @@
 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;
-    route?: string;
-};
 declare const WidgetHeaderComponent: (container: Container) => Promise<void>;
 export default WidgetHeaderComponent;

package/dist/widget-header-wrapper.c1e324d2.js

@@ -0,0 +1,115 @@
+import { WidgetComponentMixin as h, NodeConnector as c } from "@telia-ace/widget-ui";
+import { LitElement as y, html as s, nothing as d, css as f } from "lit";
+import { property as r } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { when as v } from "lit/directives/when.js";
+var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (o, n, p, a) => {
+  for (var t = a > 1 ? void 0 : a ? x(n, p) : n, l = o.length - 1, g; l >= 0; l--)
+    (g = o[l]) && (t = (a ? g(n, p, t) : g(t)) || t);
+  return a && t && _(n, p, t), t;
+};
+class e extends y {
+  constructor() {
+    super(), this._header = "", this._tagline = "", this._role = "", this._textAlign = "center";
+  }
+  render() {
+    return s` <div class="container">
+            <div
+                class=${m({
+      "main-node": !0,
+      center: this._textAlign === "center",
+      left: this._textAlign === "left",
+      right: this._textAlign === "right"
+    })}
+            >
+                ${v(
+      this._route,
+      () => s`<div>Routes not supported yet: TODO:</div>`,
+      () => s`
+                        <ui-typography variant="h1" class="header" part="header">
+                            ${this._header}
+                        </ui-typography>
+                    `
+    )}
+                ${this._tagline ? s`<p class="tagline" part="tagline">${this._tagline}</p>` : d}
+            </div>
+        </div>`;
+  }
+}
+e.styles = [
+  f`
+            ui-typography {
+                --typography-font-size: var(--size-huge, 2rem);
+                --typography-margin: 0;
+                --typography-font-weight: 300;
+                --typography-color: var(--colors-text);
+            }
+
+            h1 {
+                font-size: var(--fonts-huge);
+                margin: 0;
+                font-weight: 300;
+                color: var(--colors-text);
+            }
+
+            p {
+                color: var(--colors-text);
+                margin: 0;
+            }
+
+            svg line,
+            svg path,
+            svg circle {
+                stroke: var(--colors-text);
+            }
+
+            .container {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+            }
+
+            .tagline {
+                font-size: var(--fonts-normal);
+                font-weight: 300;
+            }
+
+            .main-node {
+                flex: 1;
+            }
+
+            .main-node.center {
+                text-align: center;
+            }
+            .main-node.left {
+                text-align: left;
+            }
+            .main-node.right {
+                text-align: right;
+            }
+        `
+];
+i([
+  r({ type: String })
+], e.prototype, "_header", 2);
+i([
+  r({ type: String })
+], e.prototype, "_tagline", 2);
+i([
+  r({ type: String })
+], e.prototype, "_role", 2);
+i([
+  r({ type: String })
+], e.prototype, "_textAlign", 2);
+i([
+  r({ type: String })
+], e.prototype, "_route", 2);
+class $ extends h(e) {
+  constructor() {
+    super(), this.connector = new c(this);
+  }
+}
+export {
+  $ as default
+};
+//# sourceMappingURL=widget-header-wrapper.c1e324d2.js.map

package/dist/widget-header-wrapper.c1e324d2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-header-wrapper.c1e324d2.js","sources":["../src/widget-header.ts","../src/widget-header-wrapper.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { when } from 'lit/directives/when.js';\n\nexport default class WidgetHeader extends LitElement {\n    // ${(p) => TODO: missing\n    //   headingElement(p)(\n    //       'h1',\n    //       css`\n    //           font-size: ${p.theme.fonts?.huge};\n    //           margin: 0;\n    //           font-weight: 300;\n    //           color: ${p.theme.colors?.text};\n    //       `\n    //   )}\n    //   const MainNode = styled.div<{\n    //     textAlign: string;\n    //     margin: { left?: string; right?: string };\n    // }>`\n    //     margin-right: ${(p) => p.margin.right || 0};\n    //     margin-left: ${(p) => p.margin.left || 0};\n    // `;\n\n    static styles = [\n        css`\n            ui-typography {\n                --typography-font-size: var(--size-huge, 2rem);\n                --typography-margin: 0;\n                --typography-font-weight: 300;\n                --typography-color: var(--colors-text);\n            }\n\n            h1 {\n                font-size: var(--fonts-huge);\n                margin: 0;\n                font-weight: 300;\n                color: var(--colors-text);\n            }\n\n            p {\n                color: var(--colors-text);\n                margin: 0;\n            }\n\n            svg line,\n            svg path,\n            svg circle {\n                stroke: var(--colors-text);\n            }\n\n            .container {\n                display: flex;\n                flex-direction: row;\n                align-items: center;\n            }\n\n            .tagline {\n                font-size: var(--fonts-normal);\n                font-weight: 300;\n            }\n\n            .main-node {\n                flex: 1;\n            }\n\n            .main-node.center {\n                text-align: center;\n            }\n            .main-node.left {\n                text-align: left;\n            }\n            .main-node.right {\n                text-align: right;\n            }\n        `,\n    ];\n\n    @property({ type: String })\n    declare _header;\n\n    @property({ type: String })\n    declare _tagline;\n\n    @property({ type: String })\n    declare _role;\n\n    @property({ type: String })\n    declare _textAlign;\n\n    @property({ type: String })\n    declare _route: string | undefined;\n\n    constructor() {\n        super();\n        this._header = '';\n        this._tagline = '';\n        this._role = '';\n        this._textAlign = 'center';\n    }\n\n    // render() {\n    //     return html`<div>WidgetHeader</div>`;\n    // }\n\n    render() {\n        // this.style.setProperty('--width', '2');\n        // <style>\n        //     :host {\n        //       --width: var(--columns);\n        //     }\n        //   </style>\n        return html` <div class=\"container\">\n            <div\n                class=${classMap({\n                    'main-node': true,\n                    center: this._textAlign === 'center',\n                    left: this._textAlign === 'left',\n                    right: this._textAlign === 'right',\n                })}\n            >\n                ${when(\n                    this._route,\n                    () => html`<div>Routes not supported yet: TODO:</div>`,\n                    () => html`\n                        <ui-typography variant=\"h1\" class=\"header\" part=\"header\">\n                            ${this._header}\n                        </ui-typography>\n                    `\n                )}\n                ${this._tagline\n                    ? html`<p class=\"tagline\" part=\"tagline\">${this._tagline}</p>`\n                    : nothing}\n            </div>\n        </div>`;\n    }\n}\n","import { NodeConnector, WidgetComponentMixin } from '@telia-ace/widget-ui';\nimport WidgetHeader from './widget-header';\n\nexport default class WidgetHeaderWrapper extends WidgetComponentMixin(WidgetHeader) {\n    connector = new NodeConnector(this);\n\n    constructor() {\n        super();\n    }\n}\n"],"names":["WidgetHeader","LitElement","html","classMap","when","nothing","css","__decorateClass","property","WidgetHeaderWrapper","WidgetComponentMixin","NodeConnector"],"mappings":";;;;;;;;;;AAKA,MAAqBA,UAAqBC,EAAW;AAAA,EAwFjD,cAAc;AACJ,aACN,KAAK,UAAU,IACf,KAAK,WAAW,IAChB,KAAK,QAAQ,IACb,KAAK,aAAa;AAAA,EACtB;AAAA,EAMA,SAAS;AAOE,WAAAC;AAAA;AAAA,wBAESC,EAAS;AAAA,MACb,aAAa;AAAA,MACb,QAAQ,KAAK,eAAe;AAAA,MAC5B,MAAM,KAAK,eAAe;AAAA,MAC1B,OAAO,KAAK,eAAe;AAAA,IAAA,CAC9B;AAAA;AAAA,kBAECC;AAAA,MACE,KAAK;AAAA,MACL,MAAMF;AAAA,MACN,MAAMA;AAAA;AAAA,8BAEI,KAAK;AAAA;AAAA;AAAA,IAAA;AAAA,kBAIjB,KAAK,WACDA,sCAAyC,KAAK,iBAC9CG;AAAA;AAAA;AAAA,EAGlB;AACJ;AAnIqBL,EAmBV,SAAS;AAAA,EACZM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDJ;AAGQC,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GAzETR,EA0ET,WAAA,WAAA,CAAA;AAGAO,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GA5ETR,EA6ET,WAAA,YAAA,CAAA;AAGAO,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GA/ETR,EAgFT,WAAA,SAAA,CAAA;AAGAO,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GAlFTR,EAmFT,WAAA,cAAA,CAAA;AAGAO,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GArFTR,EAsFT,WAAA,UAAA,CAAA;ACxFS,MAAAS,UAA4BC,EAAqBV,CAAY,EAAE;AAAA,EAGhF,cAAc;AACJ,aAHE,KAAA,YAAA,IAAIW,EAAc,IAAI;AAAA,EAIlC;AACJ;"}

package/dist/widget-header-wrapper.d.ts

@@ -0,0 +1,8 @@
+import { NodeConnector } from '@telia-ace/widget-ui';
+import WidgetHeader from './widget-header';
+declare const WidgetHeaderWrapper_base: import("@telia-ace/widget-ui").WidgetComponentConstructor<import("@telia-ace/widget-ui/dist/mixins/widget-component").WidgetComponentInterface> & typeof WidgetHeader;
+export default class WidgetHeaderWrapper extends WidgetHeaderWrapper_base {
+    connector: NodeConnector;
+    constructor();
+}
+export {};

package/dist/widget-header.d.ts

@@ -1,7 +1,11 @@
-import React from 'react';
-type Props = {
-    className: string;
-    role?: string;
-};
-declare const WidgetHeader: React.FC<Props>;
-export default WidgetHeader;
+import { LitElement } from 'lit';
+export default class WidgetHeader extends LitElement {
+    static styles: import("lit").CSSResult[];
+    _header: string;
+    _tagline: string;
+    _role: string;
+    _textAlign: string;
+    _route: string | undefined;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-components-widget-header",
-  "version": "1.0.24-experimental.2",
+  "version": "1.0.24-experimental.20",
   "description": "Widget header component for ACE Widgets.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -21,24 +21,26 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@telia-ace/widget-core": "1.0.21-experimental.2",
-    "@telia-ace/widget-routing": "1.0.22-experimental.2",
-    "@telia-ace/widget-ui": "1.0.28-experimental.2",
-    "@telia-ace/widget-utilities": "1.0.10-experimental.2",
+    "@telia-ace/widget-core": "1.0.21-experimental.20",
+    "@telia-ace/widget-routing": "1.0.22-experimental.20",
+    "@telia-ace/widget-ui": "1.0.28-experimental.20",
+    "@telia-ace/widget-utilities": "1.0.10-experimental.20",
     "@webprovisions/platform": "^1.1.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "lit": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@telia-ace/widget-developer-tools": "1.0.16-experimental.2",
+    "@telia-ace/widget-developer-tools": "1.0.16-experimental.20",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "lit": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/index.74fb7b76.js

@@ -1,73 +0,0 @@
-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 v = (s, e, i) => {
-  if (i !== "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`
-  };
-}, z = (s) => Object.keys(s).reduce(
-  (e, i) => {
-    const t = s[i];
-    if (!t)
-      return e;
-    const [o, c] = e, r = t.position === "left" ? o : c;
-    return s[i].symbol, r.push({
-      symbol: t.symbol && typeof t.symbol == "string" ? { type: "Uri", content: t.symbol } : t.symbol,
-      type: i,
-      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 i = e.getInitialRoute(), { name: t, params: o } = e.getRouteData();
-  return b(o), !((i == null ? void 0 : i.name) !== t || Object.keys(o).length > 0);
-}), w = (s) => f(
-  s,
-  "widget-header",
-  import("./widget-header.58e6e7e9.js"),
-  (e) => {
-    const { events: i } = s.get("$widget"), [t, o] = p(i), { actions: c = {} } = e.properties();
-    if (e.actions.create("close", (r, n) => n.preventDefault ? void 0 : s.get("$widget").invoke("close")), e.actions.create("back", (r, n) => {
-      if (!n.preventDefault)
-        return s.getAsync("router").then((a) => {
-          a.goBack();
-        });
-    }), e.properties((r) => {
-      const { actions: n = {} } = r;
-      if (!!n.back)
-        return Object.keys(n).forEach((a) => {
-          const u = n[a];
-          a === "back" && (u.show = r.showBack);
-        }), { actions: n };
-    }), e.actions.create("show-back", (r) => {
-      e.writeProperties({ showBack: r });
-    }), c.back) {
-      const r = () => h(s).then(
-        (n) => e.actions.dispatch("show-back", !n)
-      );
-      r(), t("router:changed", r);
-    }
-    return e.actions.create("minimize", (r, n) => n.preventDefault ? void 0 : s.get("$widget").invoke("hide")), () => {
-      o();
-    };
-  }
-), x = w;
-export {
-  x as W,
-  v as a,
-  z as c
-};
-//# sourceMappingURL=index.74fb7b76.js.map

package/dist/index.74fb7b76.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.74fb7b76.js","sources":["../src/utils.ts","../src/widget-header-component.ts"],"sourcesContent":["import { RoutingService } from '@telia-ace/widget-routing';\nimport { removeNullAndUndefinedValues } from '@telia-ace/widget-utilities';\nimport { Container } from '@webprovisions/platform';\nimport { ActionNode, Symbol } from './widget-header-component';\n\nexport const calculateMargin = (\n    leftNodes: ActionNode[],\n    rightNodes: ActionNode[],\n    textAlign: string\n) => {\n    if (textAlign !== 'center') {\n        return {};\n    }\n\n    const calculate = (nodes: ActionNode[]) => {\n        return nodes.reduce<number>((acc, node) => {\n            const [padding] = node.padding.split('px');\n            const [size] = node.size.split('px');\n            return acc + (+size + +padding * 2);\n        }, 0);\n    };\n    const leftSize = calculate(leftNodes);\n    const rightSize = calculate(rightNodes);\n\n    const total = leftSize - rightSize;\n\n    if (total === 0) {\n        return {};\n    }\n\n    const direction = leftSize > rightSize ? 'right' : 'left';\n    return {\n        [direction]: `${Math.abs(total)}px`,\n    };\n};\n\nexport const createNodes = (actions: { [key: string]: ActionNode }) => {\n    return Object.keys(actions).reduce<[ActionNode[], ActionNode[]]>(\n        (acc, key) => {\n            const node = actions[key];\n            if (!node) {\n                return acc;\n            }\n            const [left, right] = acc;\n            const arr = node.position === 'left' ? left : right;\n\n            let symbol = actions[key].symbol;\n            if (symbol && typeof symbol === 'string') {\n                symbol = {\n                    type: 'Uri',\n                    content: symbol,\n                };\n            }\n\n            arr.push({\n                symbol:\n                    node.symbol && typeof node.symbol === 'string'\n                        ? { type: 'Uri', content: node.symbol }\n                        : (node.symbol as Symbol),\n                type: key,\n                padding: node.padding || '10px',\n                label: node.label,\n                size: node.size || '64px',\n                tooltip: node.tooltip,\n                order: node.order || 0,\n                show: node.show,\n            });\n\n            return acc;\n        },\n        [[], []]\n    );\n};\n\nexport const isOnInitialRoute = (container: Container) =>\n    container.getAsync('router').then((router: RoutingService) => {\n        if (!router) {\n            return true;\n        }\n        const initialRoute = router.getInitialRoute();\n        const { name, params } = router.getRouteData();\n\n        removeNullAndUndefinedValues(params);\n\n        if (initialRoute?.name !== name || Object.keys(params).length > 0) {\n            return false;\n        }\n\n        return true;\n    });\n","import { createEventSubscriber } from '@telia-ace/widget-core';\nimport { RoutingService } from '@telia-ace/widget-routing';\nimport { createReactComponent } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\nimport { isOnInitialRoute } from './utils';\n\nexport type Symbol = {\n    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\n    content: string;\n};\n\nexport type ActionNode = {\n    type: string;\n    label?: string;\n    position?: 'right' | 'left';\n    symbol?: Symbol;\n    size: string;\n    padding: string;\n    tooltip?: string;\n    order?: number;\n    show?: boolean;\n};\n\nexport type WidgetHeaderComponentProps = {\n    header: string;\n    tagline: string;\n    textAlign?: string;\n    actions?: { [key: string]: ActionNode };\n    tooltip?: string;\n    route?: string;\n};\n\nconst WidgetHeaderComponent = (container: Container) => {\n    return createReactComponent(\n        container,\n        'widget-header',\n        import('./widget-header'),\n        (component) => {\n            const { events } = container.get('$widget');\n            const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n            const { actions = {} } = component.properties<WidgetHeaderComponentProps>();\n\n            component.actions.create('close', (data, options) => {\n                if (options.preventDefault) {\n                    return;\n                }\n\n                const widget = container.get('$widget');\n                return widget.invoke('close');\n            });\n            component.actions.create('back', (data, options) => {\n                if (options.preventDefault) {\n                    return;\n                }\n\n                return container.getAsync('router').then((router: RoutingService) => {\n                    router.goBack();\n                });\n            });\n\n            component.properties((properties) => {\n                const { actions = {} } = properties;\n\n                if (!actions.back) {\n                    return;\n                }\n\n                Object.keys(actions).forEach((key) => {\n                    const node = actions[key];\n                    if (key === 'back') {\n                        node.show = properties.showBack;\n                    }\n                });\n\n                return { actions };\n            });\n\n            component.actions.create('show-back', (showBack) => {\n                component.writeProperties({ showBack });\n            });\n\n            if (actions.back) {\n                const showBack = () =>\n                    isOnInitialRoute(container).then((onInitialRoute) =>\n                        component.actions.dispatch('show-back', !onInitialRoute)\n                    );\n\n                showBack();\n                subscribe('router:changed', showBack);\n            }\n\n            component.actions.create('minimize', (data, options) => {\n                if (options.preventDefault) {\n                    return;\n                }\n\n                const widget = container.get('$widget');\n                return widget.invoke('hide');\n            });\n\n            return () => {\n                unsubscribe();\n            };\n        }\n    );\n};\n\nexport default WidgetHeaderComponent;\n"],"names":["calculateMargin","leftNodes","rightNodes","textAlign","calculate","nodes","acc","node","padding","size","leftSize","rightSize","total","createNodes","actions","key","left","right","arr","isOnInitialRoute","container","router","initialRoute","name","params","removeNullAndUndefinedValues","WidgetHeaderComponent","createReactComponent","component","events","subscribe","unsubscribe","createEventSubscriber","data","options","properties","showBack","onInitialRoute","WidgetHeaderComponent$1"],"mappings":"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"}

package/dist/widget-header.58e6e7e9.js

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

package/dist/widget-header.58e6e7e9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"widget-header.58e6e7e9.js","sources":["../src/avatar.tsx","../src/back.tsx","../src/close.tsx","../src/minimize.tsx","../src/node.tsx","../src/widget-header.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = { node: ActionNode };\nconst Avatar: React.FC<Props> = ({ node }) => {\n    if (!node.symbol) {\n        return null;\n    }\n\n    let size;\n    const isSvg = node.symbol.type === 'Svg';\n    if (node.symbol.type === 'Svg') {\n        const sizeNumber = parseInt(node.size, 10);\n\n        if (!isNaN(sizeNumber)) {\n            size = sizeNumber;\n        }\n    }\n\n    return <Wrapper symbol={node.symbol} svg={isSvg} size={size} backgroundSize=\"cover\" />;\n};\n\nexport default Avatar;\n\nconst Wrapper = styled(({ svg, ...other }: any) => <SymbolBadge {...other} />)`\n    color: ${(p) => p.theme.colors?.text};\n    ${(p) =>\n        !p.svg &&\n        css`\n            border-radius: 50%;\n            overflow: hidden;\n        `}\n`;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n    node: ActionNode;\n};\nconst Back: React.FC<Props> = ({ node }) => {\n    const symbol = node.symbol || { type: 'Svg', content: 'back' };\n    return <SymbolBadge size={20} symbol={symbol} />;\n};\n\nexport default Back;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n    node: ActionNode;\n};\nconst Close: React.FC<Props> = ({ node }) => {\n    const symbol = node.symbol || { type: 'Svg', content: 'close' };\n    const size = parseInt(node?.size, 10) || 14;\n    return <SymbolBadge size={size} symbol={symbol} />;\n};\n\nexport default Close;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n    node: ActionNode;\n};\nconst Minimize: React.FC<Props> = ({ node }) => {\n    const symbol = node.symbol || { type: 'Svg', content: 'minimize' };\n    const size = parseInt(node?.size, 10) || 20;\n    return <SymbolBadge size={size} symbol={symbol} />;\n};\n\nexport default Minimize;\n","import styled from '@emotion/styled';\nimport { borderTabStyle, TransitionComponent, useDispatch } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport Avatar from './avatar';\nimport Back from './back';\nimport Close from './close';\nimport Minimize from './minimize';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = Merge<\n    ActionNode,\n    {\n        className?: string;\n    }\n>;\n\nconst Node: React.FC<Props> = ({ className = '', ...node }) => {\n    const dispatch = useDispatch();\n\n    const { size, padding, type, tooltip, show = true } = node;\n\n    if (type === 'back') {\n        return (\n            <NodeWrapper size={size || '64px'} padding={padding || '10px'}>\n                <TransitionComponent\n                    in={show}\n                    timeout={300}\n                    transitions={{\n                        enter: {\n                            type: 'scale',\n                            easing: 'cubic-bezier(.08,.84,.74,1.84)',\n                        },\n                        exit: {\n                            type: 'scale',\n                            easing: 'ease-out',\n                        },\n                    }}\n                >\n                    {(state: any, css: any) => (\n                        <ActionButton\n                            title={tooltip}\n                            aria-label={tooltip}\n                            animationCss={css}\n                            onClick={() => {\n                                dispatch('back');\n                            }}\n                        >\n                            <Back node={node} />\n                        </ActionButton>\n                    )}\n                </TransitionComponent>\n            </NodeWrapper>\n        );\n    }\n\n    if (!show) {\n        return null;\n    }\n\n    return (\n        <NodeWrapper\n            size={size || '64px'}\n            padding={padding || '10px'}\n            squareRatio={type === 'avatar'}\n        >\n            {type === 'avatar' && <Avatar node={node} />}\n            {type === 'close' && (\n                <ActionButton\n                    title={tooltip}\n                    aria-label={tooltip}\n                    onClick={() => {\n                        dispatch('close');\n                    }}\n                >\n                    <Close node={node} />\n                </ActionButton>\n            )}\n            {type === 'minimize' && (\n                <ActionButton\n                    title={tooltip}\n                    aria-label={tooltip}\n                    onClick={() => {\n                        dispatch('minimize');\n                    }}\n                >\n                    <Minimize node={node} />\n                </ActionButton>\n            )}\n        </NodeWrapper>\n    );\n};\n\nexport default Node;\n\nconst NodeWrapper = styled.div<{ size: string; padding: string; squareRatio?: boolean }>`\n    flex: 1;\n    max-width: ${(p) => p.size};\n    ${(p) => p.squareRatio && `max-height: ${p.size};`}\n    text-align: center;\n    padding: 0 ${(p) => p.padding};\n    && {\n        box-sizing: content-box;\n    }\n\n    svg {\n        vertical-align: middle;\n    }\n\n    i {\n        color: ${(p) => p.theme.colors?.text};\n        font-size: ${(p) => p.size};\n        min-width: 1em;\n        min-height: 1em;\n        display: inline-block;\n    }\n`;\nconst ActionButton = styled.button<any>`\n    ${(p) => !!p.animationCss && p.animationCss};\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    &:focus-visible {\n        ${borderTabStyle};\n        border-color: ${(p) => p.theme.accessibility?.colors?.inactiveText};\n    }\n`;\n","import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n    headingElement,\n    Link,\n    linkTabStyle,\n    Typography,\n    useProperties,\n} from '@telia-ace/widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React from 'react';\nimport Node from './node';\nimport { calculateMargin, createNodes } from './utils';\nimport { WidgetHeaderComponentProps } from './widget-header-component';\n\ntype Props = {\n    className: string;\n    role?: string;\n};\n\nconst WidgetHeader: React.FC<Props> = ({ className, ...other }) => {\n    const {\n        header,\n        tagline,\n        route,\n        tooltip = '',\n        actions = {},\n        textAlign = 'center',\n    } = useProperties<WidgetHeaderComponentProps>();\n\n    const [leftNodes, rightNodes] = createNodes(actions);\n    leftNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\n    rightNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\n    return (\n        <Wrapper {...other} className={appendClassNames(className, 'humany-widget-header')}>\n            {leftNodes.map((node, key) => (\n                <Node key={`${node.type}+_${key}`} {...node} />\n            ))}\n\n            <MainNode\n                textAlign={textAlign}\n                margin={calculateMargin(leftNodes, rightNodes, textAlign)}\n            >\n                {route ? (\n                    <StyledLink routeName={route} title={tooltip} aria-label={tooltip}>\n                        <Typography variant=\"h1\">{header}</Typography>\n                    </StyledLink>\n                ) : (\n                    <Typography variant=\"h1\">{header}</Typography>\n                )}\n                {tagline && <Tagline>{tagline}</Tagline>}\n            </MainNode>\n\n            {rightNodes.map((node, key) => (\n                <Node key={`${node.type}+_${key}`} {...node} />\n            ))}\n        </Wrapper>\n    );\n};\n\nexport default WidgetHeader;\n\nconst Wrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ${(p) =>\n        headingElement(p)(\n            'h1',\n            css`\n                font-size: ${p.theme.fonts?.huge};\n                margin: 0;\n                font-weight: 300;\n                color: ${p.theme.colors?.text};\n            `\n        )}\n\n    p {\n        color: ${(p) => p.theme.colors?.text};\n        margin: 0;\n    }\n\n    svg {\n        line,\n        path,\n        circle {\n            stroke: ${(p) => p.theme.colors?.text};\n        }\n    }\n`;\n\nconst Tagline = styled.p`\n    font-size: ${(p) => p.theme.fonts?.normal};\n    font-weight: 300;\n`;\n\nconst MainNode = styled.div<{\n    textAlign: string;\n    margin: { left?: string; right?: string };\n}>`\n    flex: 1;\n    text-align: ${(p) => p.textAlign};\n\n    margin-right: ${(p) => p.margin.right || 0};\n    margin-left: ${(p) => p.margin.left || 0};\n`;\n\nconst StyledLink = styled(Link)<any>`\n    text-decoration: none;\n    &:focus-visible {\n        ${(p) =>\n            headingElement(p)(\n                'h1',\n                css`\n                    ${linkTabStyle(p)}\n                    display: inline-block;\n                `\n            )}\n    }\n`;\n"],"names":["Avatar","node","size","isSvg","sizeNumber","React","Wrapper","Avatar$1","styled","_a","_b","svg","other","__objRest","SymbolBadge","__spreadValues","p","css","Back","symbol","Back$1","Close","Close$1","Minimize","Minimize$1","Node","className","dispatch","useDispatch","padding","type","tooltip","show","NodeWrapper","TransitionComponent","state","ActionButton","Node$1","borderTabStyle","WidgetHeader","header","tagline","route","actions","textAlign","useProperties","leftNodes","rightNodes","createNodes","b","__spreadProps","appendClassNames","key","MainNode","calculateMargin","StyledLink","Typography","Tagline","headingElement","Link","linkTabStyle"],"mappings":"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"}