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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { createWebComponent as t } from "@telia-ace/widget-ui";
2
2
  const o = (e) => t(
3
3
  e,
4
4
  "widget-header",
5
- import("./widget-header-wrapper.2e53459b.js")
5
+ import("./widget-header-wrapper.c1e324d2.js")
6
6
  ), n = o;
7
7
  export {
8
8
  n as default
@@ -0,0 +1,115 @@
1
+ import { WidgetComponentMixin as h, NodeConnector as c } from "@telia-ace/widget-ui";
2
+ import { LitElement as y, html as s, nothing as d, css as f } from "lit";
3
+ import { property as r } from "lit/decorators.js";
4
+ import { classMap as m } from "lit/directives/class-map.js";
5
+ import { when as v } from "lit/directives/when.js";
6
+ var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (o, n, p, a) => {
7
+ for (var t = a > 1 ? void 0 : a ? x(n, p) : n, l = o.length - 1, g; l >= 0; l--)
8
+ (g = o[l]) && (t = (a ? g(n, p, t) : g(t)) || t);
9
+ return a && t && _(n, p, t), t;
10
+ };
11
+ class e extends y {
12
+ constructor() {
13
+ super(), this._header = "", this._tagline = "", this._role = "", this._textAlign = "center";
14
+ }
15
+ render() {
16
+ return s` <div class="container">
17
+ <div
18
+ class=${m({
19
+ "main-node": !0,
20
+ center: this._textAlign === "center",
21
+ left: this._textAlign === "left",
22
+ right: this._textAlign === "right"
23
+ })}
24
+ >
25
+ ${v(
26
+ this._route,
27
+ () => s`<div>Routes not supported yet: TODO:</div>`,
28
+ () => s`
29
+ <ui-typography variant="h1" class="header" part="header">
30
+ ${this._header}
31
+ </ui-typography>
32
+ `
33
+ )}
34
+ ${this._tagline ? s`<p class="tagline" part="tagline">${this._tagline}</p>` : d}
35
+ </div>
36
+ </div>`;
37
+ }
38
+ }
39
+ e.styles = [
40
+ f`
41
+ ui-typography {
42
+ --typography-font-size: var(--size-huge, 2rem);
43
+ --typography-margin: 0;
44
+ --typography-font-weight: 300;
45
+ --typography-color: var(--colors-text);
46
+ }
47
+
48
+ h1 {
49
+ font-size: var(--fonts-huge);
50
+ margin: 0;
51
+ font-weight: 300;
52
+ color: var(--colors-text);
53
+ }
54
+
55
+ p {
56
+ color: var(--colors-text);
57
+ margin: 0;
58
+ }
59
+
60
+ svg line,
61
+ svg path,
62
+ svg circle {
63
+ stroke: var(--colors-text);
64
+ }
65
+
66
+ .container {
67
+ display: flex;
68
+ flex-direction: row;
69
+ align-items: center;
70
+ }
71
+
72
+ .tagline {
73
+ font-size: var(--fonts-normal);
74
+ font-weight: 300;
75
+ }
76
+
77
+ .main-node {
78
+ flex: 1;
79
+ }
80
+
81
+ .main-node.center {
82
+ text-align: center;
83
+ }
84
+ .main-node.left {
85
+ text-align: left;
86
+ }
87
+ .main-node.right {
88
+ text-align: right;
89
+ }
90
+ `
91
+ ];
92
+ i([
93
+ r({ type: String })
94
+ ], e.prototype, "_header", 2);
95
+ i([
96
+ r({ type: String })
97
+ ], e.prototype, "_tagline", 2);
98
+ i([
99
+ r({ type: String })
100
+ ], e.prototype, "_role", 2);
101
+ i([
102
+ r({ type: String })
103
+ ], e.prototype, "_textAlign", 2);
104
+ i([
105
+ r({ type: String })
106
+ ], e.prototype, "_route", 2);
107
+ class $ extends h(e) {
108
+ constructor() {
109
+ super(), this.connector = new c(this);
110
+ }
111
+ }
112
+ export {
113
+ $ as default
114
+ };
115
+ //# sourceMappingURL=widget-header-wrapper.c1e324d2.js.map
@@ -0,0 +1 @@
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telia-ace/widget-components-widget-header",
3
- "version": "1.0.24-experimental.19",
3
+ "version": "1.0.24-experimental.20",
4
4
  "description": "Widget header component for ACE Widgets.",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "Telia Company AB",
@@ -21,10 +21,10 @@
21
21
  },
22
22
  "sideEffects": false,
23
23
  "dependencies": {
24
- "@telia-ace/widget-core": "1.0.21-experimental.19",
25
- "@telia-ace/widget-routing": "1.0.22-experimental.19",
26
- "@telia-ace/widget-ui": "1.0.28-experimental.19",
27
- "@telia-ace/widget-utilities": "1.0.10-experimental.19",
24
+ "@telia-ace/widget-core": "1.0.21-experimental.20",
25
+ "@telia-ace/widget-routing": "1.0.22-experimental.20",
26
+ "@telia-ace/widget-ui": "1.0.28-experimental.20",
27
+ "@telia-ace/widget-utilities": "1.0.10-experimental.20",
28
28
  "@webprovisions/platform": "^1.1.2"
29
29
  },
30
30
  "peerDependencies": {
@@ -37,7 +37,7 @@
37
37
  "devDependencies": {
38
38
  "@emotion/react": "^11.10.5",
39
39
  "@emotion/styled": "^11.10.5",
40
- "@telia-ace/widget-developer-tools": "1.0.16-experimental.19",
40
+ "@telia-ace/widget-developer-tools": "1.0.16-experimental.20",
41
41
  "@types/react": "^18.0.26",
42
42
  "@types/react-dom": "^18.0.10",
43
43
  "lit": "^2.6.0",
@@ -1,115 +0,0 @@
1
- import { WidgetComponentMixin as h, NodeConnector as c } from "@telia-ace/widget-ui";
2
- import { LitElement as y, html as s, nothing as d, css as f } from "lit";
3
- import { property as r } from "lit/decorators.js";
4
- import { classMap as m } from "lit/directives/class-map.js";
5
- import { when as v } from "lit/directives/when.js";
6
- var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (o, n, p, a) => {
7
- for (var t = a > 1 ? void 0 : a ? x(n, p) : n, l = o.length - 1, g; l >= 0; l--)
8
- (g = o[l]) && (t = (a ? g(n, p, t) : g(t)) || t);
9
- return a && t && _(n, p, t), t;
10
- };
11
- class e extends y {
12
- constructor() {
13
- super(), this._header = "", this._tagline = "", this._role = "", this._textAlign = "";
14
- }
15
- render() {
16
- return s` <div class="container">
17
- <div
18
- class=${m({
19
- "main-node": !0,
20
- center: this._textAlign === "center",
21
- left: this._textAlign === "left",
22
- right: this._textAlign === "right"
23
- })}
24
- >
25
- ${v(
26
- this._route,
27
- () => s`<div>Routes not supported yet: TODO:</div>`,
28
- () => s`
29
- <ui-typography variant="h1" class="header" part="header">
30
- ${this._header}
31
- </ui-typography>
32
- `
33
- )}
34
- ${this._tagline ? s`<p class="tagline" part="tagline">${this._tagline}</p>` : d}
35
- </div>
36
- </div>`;
37
- }
38
- }
39
- e.styles = [
40
- f`
41
- ui-typography {
42
- --typography-font-size: var(--size-huge, 2rem);
43
- --typography-margin: 0;
44
- --typography-font-weight: 300;
45
- --typography-color: var(--colors-text);
46
- }
47
-
48
- h1 {
49
- font-size: var(--fonts-huge);
50
- margin: 0;
51
- font-weight: 300;
52
- color: var(--colors-text);
53
- }
54
-
55
- p {
56
- color: var(--colors-text);
57
- margin: 0;
58
- }
59
-
60
- svg line,
61
- svg path,
62
- svg circle {
63
- stroke: var(--colors-text);
64
- }
65
-
66
- .container {
67
- display: flex;
68
- flex-direction: row;
69
- align-items: center;
70
- }
71
-
72
- .tagline {
73
- font-size: var(--fonts-normal);
74
- font-weight: 300;
75
- }
76
-
77
- .main-node {
78
- flex: 1;
79
- }
80
-
81
- .main-node.center {
82
- text-align: center;
83
- }
84
- .main-node.left {
85
- text-align: left;
86
- }
87
- .main-node.right {
88
- text-align: right;
89
- }
90
- `
91
- ];
92
- i([
93
- r({ type: String })
94
- ], e.prototype, "_header", 2);
95
- i([
96
- r({ type: String })
97
- ], e.prototype, "_tagline", 2);
98
- i([
99
- r({ type: String })
100
- ], e.prototype, "_role", 2);
101
- i([
102
- r({ type: String })
103
- ], e.prototype, "_textAlign", 2);
104
- i([
105
- r({ type: String })
106
- ], e.prototype, "_route", 2);
107
- class $ extends h(e) {
108
- constructor() {
109
- super(), this.connector = new c(this);
110
- }
111
- }
112
- export {
113
- $ as default
114
- };
115
- //# sourceMappingURL=widget-header-wrapper.2e53459b.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"widget-header-wrapper.2e53459b.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 = '';\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 ? html`<p class=\"tagline\" part=\"tagline\">${this._tagline}</p>` : 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,kBAEGC,EAAS;AAAA,MACb,aAAa;AAAA,MACb,QAAQ,KAAK,eAAe;AAAA,MAC5B,MAAM,KAAK,eAAe;AAAA,MAC1B,OAAO,KAAK,eAAe;AAAA,IAAA,CAC9B;AAAA;AAAA,YAECC;AAAA,MACE,KAAK;AAAA,MACL,MAAMF;AAAA,MACN,MAAMA;AAAA;AAAA,kBAEF,KAAK;AAAA;AAAA;AAAA,IAAA;AAAA,YAIX,KAAK,WAAWA,sCAAyC,KAAK,iBAAiBG;AAAA;AAAA;AAAA,EAGvF;AACJ;AAjIqBL,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;"}