@telia-ace/knowledge-widget-components-notification-row 1.0.38-experimental.2 → 1.0.38-experimental.4

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
@@ -5,7 +5,7 @@ const i = (o) => {
5
5
  return e(t), n(
6
6
  o,
7
7
  "notification-row",
8
- import("./notification-row-wrapper.297e86c1.js"),
8
+ import("./notification-row-wrapper.c29d3ce3.js"),
9
9
  (r) => {
10
10
  }
11
11
  );
@@ -1,15 +1,5 @@
1
1
  import { ReactiveControllerHost } from 'lit';
2
- import { ComponentNode } from '@telia-ace/knowledge-widget-core';
3
- import { Container } from '@webprovisions/platform';
4
- declare class DataProvider {
5
- private _host;
6
- node: ComponentNode | undefined;
7
- nodeId: string;
8
- container: Container | undefined;
9
- constructor(elem: HTMLElement);
10
- initialize(): Promise<void>;
11
- _requestInstance(key: string): any;
12
- }
2
+ import { DataProvider } from '@telia-ace/widget-ui';
13
3
  export declare class NotificationRowDataProvider extends DataProvider {
14
4
  host: ReactiveControllerHost;
15
5
  constructor(host: ReactiveControllerHost);
@@ -17,4 +7,3 @@ export declare class NotificationRowDataProvider extends DataProvider {
17
7
  initialize(): Promise<void>;
18
8
  _fetch(): Promise<void>;
19
9
  }
20
- export {};
@@ -1,68 +1,37 @@
1
- var P = Object.defineProperty, C = Object.defineProperties;
2
- var A = Object.getOwnPropertyDescriptors;
3
- var y = Object.getOwnPropertySymbols, k = Object.getPrototypeOf, L = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable, O = Reflect.get;
4
- var w = (a, t, e) => t in a ? P(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e, b = (a, t) => {
1
+ var P = Object.defineProperty, A = Object.defineProperties;
2
+ var k = Object.getOwnPropertyDescriptors;
3
+ var y = Object.getOwnPropertySymbols, C = Object.getPrototypeOf, L = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable, O = Reflect.get;
4
+ var w = (i, t, e) => t in i ? P(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, b = (i, t) => {
5
5
  for (var e in t || (t = {}))
6
- L.call(t, e) && w(a, e, t[e]);
6
+ L.call(t, e) && w(i, e, t[e]);
7
7
  if (y)
8
8
  for (var e of y(t))
9
- z.call(t, e) && w(a, e, t[e]);
10
- return a;
11
- }, f = (a, t) => C(a, A(t));
12
- var m = (a, t, e) => O(k(a), e, t);
13
- var h = (a, t, e) => new Promise((o, i) => {
14
- var l = (d) => {
9
+ z.call(t, e) && w(i, e, t[e]);
10
+ return i;
11
+ }, f = (i, t) => A(i, k(t));
12
+ var m = (i, t, e) => O(C(i), e, t);
13
+ var u = (i, t, e) => new Promise((o, n) => {
14
+ var a = (c) => {
15
15
  try {
16
- c(e.next(d));
17
- } catch (u) {
18
- i(u);
16
+ p(e.next(c));
17
+ } catch (h) {
18
+ n(h);
19
19
  }
20
- }, n = (d) => {
20
+ }, s = (c) => {
21
21
  try {
22
- c(e.throw(d));
23
- } catch (u) {
24
- i(u);
22
+ p(e.throw(c));
23
+ } catch (h) {
24
+ n(h);
25
25
  }
26
- }, c = (d) => d.done ? o(d.value) : Promise.resolve(d.value).then(l, n);
27
- c((e = e.apply(a, t)).next());
26
+ }, p = (c) => c.done ? o(c.value) : Promise.resolve(c.value).then(a, s);
27
+ p((e = e.apply(i, t)).next());
28
28
  });
29
- import { ComponentPlatform as I } from "@telia-ace/knowledge-widget-core";
30
- import { WidgetComponentMixin as E, NodeConnector as N } from "@telia-ace/widget-ui";
31
- import { LitElement as S, nothing as v, html as g, css as D } from "lit";
32
- import { property as p, state as $ } from "lit/decorators.js";
29
+ import { DataClient as N } from "@telia-ace/knowledge-data-client";
30
+ import { DataProvider as E, WidgetComponentMixin as S, NodeConnector as D } from "@telia-ace/widget-ui";
31
+ import { LitElement as B, nothing as v, html as g, css as R } from "lit";
32
+ import { property as d, state as $ } from "lit/decorators.js";
33
33
  import { classMap as _ } from "lit/directives/class-map.js";
34
- class B {
35
- constructor(t) {
36
- this.nodeId = "", this._host = t;
37
- }
38
- initialize() {
39
- return h(this, null, function* () {
40
- if (this.nodeId = this._host.getAttribute("nodeId"), !this.nodeId) {
41
- console.warn("Could not get node id in DataProvider.");
42
- return;
43
- }
44
- if (this.container = this._requestInstance("container"), !this.container) {
45
- console.warn("Could not get data in DataProvider. Container was not defined.");
46
- return;
47
- }
48
- const t = yield I.getInstance(this.container);
49
- if (this.node = t.nodes.get(this.nodeId), !this.node) {
50
- console.warn(`Could not get component node with ID: ${this.nodeId}.`);
51
- return;
52
- }
53
- });
54
- }
55
- _requestInstance(t) {
56
- const e = new CustomEvent("request-instance", {
57
- detail: { key: t },
58
- bubbles: !0,
59
- composed: !0,
60
- cancelable: !0
61
- });
62
- return this._host.dispatchEvent(e), e.detail.instance;
63
- }
64
- }
65
- class x extends B {
34
+ class x extends E {
66
35
  constructor(t) {
67
36
  super(t), (this.host = t).addController(this);
68
37
  }
@@ -70,41 +39,45 @@ class x extends B {
70
39
  this.initialize();
71
40
  }
72
41
  initialize() {
73
- return h(this, null, function* () {
42
+ return u(this, null, function* () {
74
43
  yield m(x.prototype, this, "initialize").call(this), this._fetch();
75
44
  });
76
45
  }
77
46
  _fetch() {
78
- return h(this, null, function* () {
79
- var c;
80
- if (!this.node)
47
+ return u(this, null, function* () {
48
+ if (!this.node || !this.container)
81
49
  return;
82
50
  this.node.writeProperties(f(b({}, this.node.attributes.properties), {
83
51
  loading: !0,
84
52
  error: void 0,
85
53
  notifications: []
86
54
  }));
55
+ const t = yield N.getInstance(this.container);
56
+ if (!t) {
57
+ console.warn("Unable to get DataClient in NotificationRow.");
58
+ return;
59
+ }
87
60
  const {
88
- topNotifications: t = [],
89
- bottomNotifications: e = [],
90
- middleNotifications: o = []
91
- } = yield (c = this.container) == null ? void 0 : c.getAsync("dataClient").then((d) => d.fetch("row-notices", {}));
92
- let i = [];
93
- const { notifications: l, types: n = [] } = this.node.attributes.properties;
94
- n.length ? (n.indexOf("top") > -1 && (i = i.concat(t)), n.indexOf("middle") > -1 && (i = i.concat(o)), n.indexOf("bottom") > -1 && (i = i.concat(e))) : i = t, this.node.writeProperties(f(b({}, this.node.attributes.properties), {
61
+ topNotifications: e = [],
62
+ bottomNotifications: o = [],
63
+ middleNotifications: n = []
64
+ } = yield t.fetch("row-notices", {});
65
+ let a = [];
66
+ const { notifications: s, types: p = [] } = this.node.attributes.properties;
67
+ p.length ? (p.indexOf("top") > -1 && (a = a.concat(e)), p.indexOf("middle") > -1 && (a = a.concat(n)), p.indexOf("bottom") > -1 && (a = a.concat(o))) : a = e, this.node.writeProperties(f(b({}, this.node.attributes.properties), {
95
68
  loading: !1,
96
69
  error: void 0,
97
- notifications: i.length ? i : l
70
+ notifications: a.length ? a : s
98
71
  }));
99
72
  });
100
73
  }
101
74
  }
102
- var j = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (a, t, e, o) => {
103
- for (var i = o > 1 ? void 0 : o ? q(t, e) : t, l = a.length - 1, n; l >= 0; l--)
104
- (n = a[l]) && (i = (o ? n(t, e, i) : n(i)) || i);
105
- return o && i && j(t, e, i), i;
75
+ var j = Object.defineProperty, K = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
76
+ for (var n = o > 1 ? void 0 : o ? K(t, e) : t, a = i.length - 1, s; a >= 0; a--)
77
+ (s = i[a]) && (n = (o ? s(t, e, n) : s(n)) || n);
78
+ return o && n && j(t, e, n), n;
106
79
  };
107
- class r extends S {
80
+ class r extends B {
108
81
  constructor() {
109
82
  super(...arguments), this._allowPaging = !1, this._expandable = !1, this._closeAriaLabel = "", this._pageNextAriaLabel = "", this._expandAriaLabel = "", this._pagePreviousAriaLabel = "", this._types = [], this._notifications = [], this.closed = [], this.expanded = !1, this.index = 0;
110
83
  }
@@ -133,7 +106,7 @@ class r extends S {
133
106
  "not-expandable": this._expandable && !this.expanded
134
107
  };
135
108
  if (this._allowPaging = !0, this._allowPaging) {
136
- const o = t[this.index] || t[this.index + 1] || t[this.index - 1], { id: i, body: l } = o || {};
109
+ const o = t[this.index] || t[this.index + 1] || t[this.index - 1], { id: n, body: a } = o || {};
137
110
  return g`
138
111
  <!-- onKeyDown={(e: React.KeyboardEvent) => {
139
112
  if (e.key === 'Enter') {
@@ -158,24 +131,24 @@ class r extends S {
158
131
  part="close-button"
159
132
  aria-label=${this._closeAriaLabel}
160
133
  @click=${() => {
161
- this.index = t.indexOf(o), this.closed = [...this.closed, i];
134
+ this.index = t.indexOf(o), this.closed = [...this.closed, n];
162
135
  }}
163
136
  >
164
137
  <ui-symbol-badge .symbol=${{ type: "Svg", content: "close" }} />
165
138
  </ui-button>
166
139
  <ui-html
167
140
  data-pageable=${length > 1}
168
- data-notification=${i}
141
+ data-notification=${n}
169
142
  data-expandable=${this._expandable}
170
143
  data-expanded=${this.expanded}
171
- .html=${l}
144
+ .html=${a}
172
145
  />
173
146
  <div class="notification-row-pager" part="pager">
174
147
  <ui-button
175
148
  aria-label=${this._pagePreviousAriaLabel}
176
149
  data-disabled=${this.index === 0}
177
- @click=${(n) => {
178
- n.stopPropagation(), this.index > 0 && (this.index -= 1);
150
+ @click=${(s) => {
151
+ s.stopPropagation(), this.index > 0 && (this.index -= 1);
179
152
  }}
180
153
  part="arrow-button"
181
154
  >
@@ -189,8 +162,8 @@ class r extends S {
189
162
  <ui-button
190
163
  aria-label=${this._pageNextAriaLabel}
191
164
  data-disabled=${this.index + 1 >= t.length}
192
- @click=${(n) => {
193
- n.stopPropagation(), this.index < t.length - 1 && (this.index += 1);
165
+ @click=${(s) => {
166
+ s.stopPropagation(), this.index < t.length - 1 && (this.index += 1);
194
167
  }}
195
168
  part="arrow-button"
196
169
  >
@@ -212,7 +185,7 @@ class r extends S {
212
185
  }
213
186
  }
214
187
  r.styles = [
215
- D`
188
+ R`
216
189
  :host::part(close-button) {
217
190
  position: absolute;
218
191
  top: 7.5px;
@@ -322,45 +295,45 @@ r.styles = [
322
295
  }
323
296
  `
324
297
  ];
325
- s([
326
- p({ type: Boolean })
298
+ l([
299
+ d({ type: Boolean })
327
300
  ], r.prototype, "_allowPaging", 2);
328
- s([
329
- p({ type: Boolean })
301
+ l([
302
+ d({ type: Boolean })
330
303
  ], r.prototype, "_expandable", 2);
331
- s([
332
- p({ type: String })
304
+ l([
305
+ d({ type: String })
333
306
  ], r.prototype, "_closeAriaLabel", 2);
334
- s([
335
- p({ type: String })
307
+ l([
308
+ d({ type: String })
336
309
  ], r.prototype, "_pageNextAriaLabel", 2);
337
- s([
338
- p({ type: String })
310
+ l([
311
+ d({ type: String })
339
312
  ], r.prototype, "_expandAriaLabel", 2);
340
- s([
341
- p({ type: String })
313
+ l([
314
+ d({ type: String })
342
315
  ], r.prototype, "_pagePreviousAriaLabel", 2);
343
- s([
344
- p({ type: Array })
316
+ l([
317
+ d({ type: Array })
345
318
  ], r.prototype, "_types", 2);
346
- s([
347
- p({ type: Array })
319
+ l([
320
+ d({ type: Array })
348
321
  ], r.prototype, "_notifications", 2);
349
- s([
322
+ l([
350
323
  $()
351
324
  ], r.prototype, "closed", 2);
352
- s([
353
- p({ reflect: !0 })
325
+ l([
326
+ d({ reflect: !0 })
354
327
  ], r.prototype, "expanded", 2);
355
- s([
328
+ l([
356
329
  $()
357
330
  ], r.prototype, "index", 2);
358
- class G extends E(r) {
331
+ class F extends S(r) {
359
332
  constructor() {
360
- super(), this.connector = new N(this), this.dataProvider = new x(this);
333
+ super(), this.connector = new D(this), this.dataProvider = new x(this);
361
334
  }
362
335
  }
363
336
  export {
364
- G as default
337
+ F as default
365
338
  };
366
- //# sourceMappingURL=notification-row-wrapper.297e86c1.js.map
339
+ //# sourceMappingURL=notification-row-wrapper.c29d3ce3.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"notification-row-wrapper.c29d3ce3.js","sources":["../src/notification-row-data-provider.ts","../src/notification-row.ts","../src/notification-row-wrapper.ts"],"sourcesContent":["import { ReactiveControllerHost } from 'lit';\n// import { DataProvider } from 'types-web';\nimport { DataClient } from '@telia-ace/knowledge-data-client';\nimport { DataProvider } from '@telia-ace/widget-ui';\n\n// class DataProvider {\n// private _host: HTMLElement;\n// node: ComponentNode | undefined;\n// nodeId: string = '';\n// container: Container | undefined;\n\n// constructor(elem: HTMLElement) {\n// this._host = elem;\n// }\n\n// async initialize() {\n// this.nodeId = (this._host as any).getAttribute('nodeId');\n\n// if (!this.nodeId) {\n// console.warn('Could not get node id in DataProvider.');\n// return;\n// }\n\n// this.container = this._requestInstance('container');\n\n// if (!this.container) {\n// console.warn('Could not get data in DataProvider. Container was not defined.');\n// return;\n// }\n// const platform = await ComponentPlatform.getInstance(this.container);\n// this.node = platform.nodes.get(this.nodeId);\n\n// if (!this.node) {\n// console.warn(`Could not get component node with ID: ${this.nodeId}.`);\n// return;\n// }\n// }\n\n// _requestInstance(key: string) {\n// const event = new CustomEvent<{ key: string; instance?: any }>('request-instance', {\n// detail: { key },\n// bubbles: true,\n// composed: true,\n// cancelable: true,\n// });\n// (this._host as any).dispatchEvent(event);\n\n// return event.detail.instance;\n// }\n// }\n\nexport class NotificationRowDataProvider extends DataProvider {\n host;\n\n constructor(host: ReactiveControllerHost) {\n super(host as any);\n (this.host = host).addController(this);\n }\n\n hostConnected() {\n this.initialize();\n }\n\n async initialize() {\n await super.initialize();\n\n this._fetch();\n }\n\n async _fetch() {\n if (!this.node || !this.container) {\n return;\n }\n this.node.writeProperties({\n ...this.node.attributes.properties,\n loading: true,\n error: undefined,\n notifications: [],\n });\n\n const dataClient = await DataClient.getInstance(this.container);\n\n if (!dataClient) {\n console.warn('Unable to get DataClient in NotificationRow.');\n return;\n }\n\n const {\n topNotifications = [],\n bottomNotifications = [],\n middleNotifications = [],\n } = await (dataClient as any).fetch('row-notices', {\n // categories: [ TODO: missing\n // input.params.guideCategory,\n // input.params.contactCategory,\n // ].filter((c) => !!c),\n // searchPhrase: input.params.phrase,\n });\n // const {\n // topNotifications = [],\n // bottomNotifications = [],\n // middleNotifications = [],\n // } = await this.container?.getAsync('dataClient').then((dataClient) => {\n // return dataClient.fetch('row-notices', {\n // // categories: [ TODO: missing\n // // input.params.guideCategory,\n // // input.params.contactCategory,\n // // ].filter((c) => !!c),\n // // searchPhrase: input.params.phrase,\n // });\n // });\n\n let newNotifications: Notification[] = [];\n const { notifications, types = [] } = this.node.attributes.properties;\n if (types.length) {\n if (types.indexOf('top') > -1) {\n newNotifications = newNotifications.concat(topNotifications);\n }\n if (types.indexOf('middle') > -1) {\n newNotifications = newNotifications.concat(middleNotifications);\n }\n if (types.indexOf('bottom') > -1) {\n newNotifications = newNotifications.concat(bottomNotifications);\n }\n } else {\n newNotifications = topNotifications;\n }\n\n this.node.writeProperties({\n ...this.node.attributes.properties,\n loading: false,\n error: undefined,\n notifications: newNotifications.length ? newNotifications : notifications,\n });\n }\n}\n","import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport default class NotificationRow extends LitElement {\n @property({ type: Boolean })\n _allowPaging = false;\n\n @property({ type: Boolean })\n _expandable = false;\n\n @property({ type: String })\n _closeAriaLabel = '';\n\n @property({ type: String })\n _pageNextAriaLabel = '';\n\n @property({ type: String })\n _expandAriaLabel = '';\n\n @property({ type: String })\n _pagePreviousAriaLabel = '';\n\n @property({ type: Array })\n _types: string[] = [];\n\n @property({ type: Array })\n _notifications: any[] = []; // TODO: no any\n\n @state() closed: string[] = [];\n\n @property({ reflect: true }) expanded = false;\n\n @state() index = 0;\n\n // const CloseButton = styled(StyledButton)`\n // svg {\n // vertical-align: middle;\n // line,\n // path {\n // stroke: ${(p) => p.theme.colors?.text};\n // }\n // }\n // `;\n\n static styles = [\n // genericHtml,\n css`\n :host::part(close-button) {\n position: absolute;\n top: 7.5px;\n right: 7.5px;\n width: 25px;\n height: auto;\n padding: calc(var(--size-small) / 2) var(--size-small);\n }\n\n :host::part(pager) {\n text-align: center;\n width: 100%;\n }\n\n :host::part(pager) span {\n font-size: var(--fonts-small);\n display: inline-block;\n width: 30px;\n text-align: center;\n }\n\n i {\n color: var(--colors-text);\n }\n\n a {\n color: var(--colors-link);\n }\n\n .notification-row {\n padding: var(--size-normal) calc(var(--cardinal) * 12);\n text-align: center;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n background-color: var(\n --notification-row-background,\n var(--notification-row-background-default)\n );\n color: var(--colors-text);\n border-radius: var(--borderRadius);\n }\n\n .notification-row.expandable {\n cursor: pointer;\n }\n\n .notification-row.not-expandable ui-html {\n max-width: 100%;\n }\n\n .notification-row.not-expandable ui-html p {\n display: none;\n }\n .notification-row.not-expandable ui-html p:first-child {\n display: block;\n margin-bottom: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .notification-row[data-allow-paging='false'] {\n flex-wrap: wrap;\n }\n .notification-row[data-allow-paging='false'] > div {\n min-width: 100%;\n margin: var(--cardinal * 2);\n }\n\n ui-html {\n flex: 1;\n font-size: var(--fonts-normal);\n line-height: 1.6em;\n font-weight: 300;\n }\n\n ui-button::part(container) {\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: opacity 200ms ease-out;\n justify-self: flex-end;\n align-self: flex-start;\n padding: var(--size-small);\n }\n\n ui-button::part(container):focus-visible {\n outline: var(--accessibility-border);\n color: var(--accessibility-colors-inactiveText);\n border-color: transparent;\n }\n\n ui-button::part(container[data-disabled]) {\n display: none;\n }\n\n ui-button[data-disabled='true']::part(container) {\n opacity: 0.8;\n }\n\n @media (hover: hover) {\n ui-button[data-disabled='false']:hover::part(container) {\n opacity: 0.5;\n }\n }\n `,\n ];\n\n connectedCallback() {\n super.connectedCallback();\n }\n\n private _toggleExpand() {\n this.expanded = !this.expanded;\n }\n\n private getBackgroundColor() {\n if (this._types.length) {\n if (this._types.indexOf('top') > -1) {\n return '--colors-warning';\n } else if (this._types.indexOf('bottom') > -1) {\n return '--colors-transparent';\n }\n return '--colors-primary';\n }\n return '--colors-warning';\n }\n\n render() {\n this.style.setProperty(\n '--notification-row-background-default',\n `var(${this.getBackgroundColor()})`\n );\n\n const filtered = this._notifications.filter(({ id }) => this.closed.indexOf(id) === -1);\n\n if (!filtered.length) {\n return nothing;\n }\n const classes = {\n 'humany-notification-row': true,\n 'notification-row': true,\n expandable: this._expandable,\n expanded: this.expanded,\n 'not-expandable': this._expandable && !this.expanded,\n };\n\n this._allowPaging = true;\n\n if (this._allowPaging) {\n const notification =\n filtered[this.index] || filtered[this.index + 1] || filtered[this.index - 1];\n\n const { id, body } = notification || {};\n\n return html`\n <!-- onKeyDown={(e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n toggleExpand();\n }\n }}\n onClick={toggleExpand} -->\n <div\n class=${classMap(classes)}\n part=\"container\"\n data-expandable=${this._expandable}\n data-allow-paging=${this._allowPaging}\n aria-expanded=${this._expandable ? this.expanded : true}\n aria-label=${this._expandAriaLabel}\n tabindex=${this._expandable ? 0 : -1}\n @click=${() => {\n this._toggleExpand();\n }}\n >\n <ui-button\n class=\"notification-row-close-button\"\n part=\"close-button\"\n aria-label=${this._closeAriaLabel}\n @click=${() => {\n this.index = filtered.indexOf(notification);\n this.closed = [...this.closed, id];\n }}\n >\n <ui-symbol-badge .symbol=${{ type: 'Svg', content: 'close' }} />\n </ui-button>\n <ui-html\n data-pageable=${length > 1}\n data-notification=${id}\n data-expandable=${this._expandable}\n data-expanded=${this.expanded}\n .html=${body}\n />\n <div class=\"notification-row-pager\" part=\"pager\">\n <ui-button\n aria-label=${this._pagePreviousAriaLabel}\n data-disabled=${this.index === 0}\n @click=${(e: Event) => {\n e.stopPropagation();\n if (this.index > 0) {\n this.index -= 1;\n }\n }}\n part=\"arrow-button\"\n >\n <ui-symbol-badge\n .size=${10}\n .symbol=${{ type: 'Svg', content: 'caret-left' }}\n part=\"arrow-icon\"\n />\n </ui-button>\n <span> ${this.index + 1}/${filtered.length} </span>\n <ui-button\n aria-label=${this._pageNextAriaLabel}\n data-disabled=${this.index + 1 >= filtered.length}\n @click=${(e: Event) => {\n e.stopPropagation();\n if (this.index < filtered.length - 1) {\n this.index += 1;\n }\n }}\n part=\"arrow-button\"\n >\n <ui-symbol-badge\n .size=${10}\n .symbol=${{ type: 'Svg', content: 'caret-right' }}\n part=\"arrow-icon\"\n />\n </ui-button>\n </div>\n </div>\n `;\n }\n\n // data-pageable=\"false\"\n // data-types=${types}\n // data-allow-paging=\"false\"\n // className={appendClassNames(className, 'humany-notification-row')}\n return html`\n <div part=\"container\" class=${classMap(classes)} data-expandable=${this._expandable}>\n ${filtered.map((notification) => {\n if (!notification) {\n return nothing;\n }\n\n return html` <ui-html .html=${notification.body} /> `;\n })}\n </div>\n `;\n }\n}\n","import { NotificationRowDataProvider } from './notification-row-data-provider';\n\nimport { NodeConnector, WidgetComponentMixin } from '@telia-ace/widget-ui';\nimport NotificationRow from './notification-row';\n\nexport default class NotificationRowWrapper extends WidgetComponentMixin(NotificationRow) {\n connector = new NodeConnector(this);\n dataProvider = new NotificationRowDataProvider(this);\n\n constructor() {\n super();\n }\n}\n"],"names":["NotificationRowDataProvider","DataProvider","host","__async","__superGet","__spreadProps","__spreadValues","dataClient","DataClient","topNotifications","bottomNotifications","middleNotifications","newNotifications","notifications","types","NotificationRow","LitElement","filtered","id","nothing","classes","notification","body","html","classMap","e","css","__decorateClass","property","state","NotificationRowWrapper","WidgetComponentMixin","NodeConnector"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telia-ace/knowledge-widget-components-notification-row",
3
- "version": "1.0.38-experimental.2",
3
+ "version": "1.0.38-experimental.4",
4
4
  "description": "Notification row component for ACE Knowledge Widgets.",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "Telia Company AB",
@@ -21,9 +21,10 @@
21
21
  },
22
22
  "sideEffects": false,
23
23
  "dependencies": {
24
- "@telia-ace/knowledge-widget-core": "1.0.34-experimental.2",
25
- "@telia-ace/knowledge-widget-types-grid": "1.0.45-experimental.2",
26
- "@telia-ace/knowledge-widget-ui": "1.0.40-experimental.2",
24
+ "@telia-ace/knowledge-data-client": "^1.0.1",
25
+ "@telia-ace/knowledge-widget-core": "1.0.34-experimental.4",
26
+ "@telia-ace/knowledge-widget-types-grid": "1.0.45-experimental.4",
27
+ "@telia-ace/knowledge-widget-ui": "1.0.40-experimental.4",
27
28
  "@telia-ace/widget-services": "^1.0.21-experimental.14",
28
29
  "@telia-ace/widget-ui": "^1.0.28-experimental.14",
29
30
  "@telia-ace/widget-utilities": "^1.0.10-experimental.14",
@@ -1 +0,0 @@
1
- {"version":3,"file":"notification-row-wrapper.297e86c1.js","sources":["../src/notification-row-data-provider.ts","../src/notification-row.ts","../src/notification-row-wrapper.ts"],"sourcesContent":["import { ReactiveControllerHost } from 'lit';\n// import { DataProvider } from 'types-web';\nimport { ComponentNode, ComponentPlatform } from '@telia-ace/knowledge-widget-core';\nimport { Container } from '@webprovisions/platform';\n\nclass DataProvider {\n private _host: HTMLElement;\n node: ComponentNode | undefined;\n nodeId: string = '';\n container: Container | undefined;\n\n constructor(elem: HTMLElement) {\n this._host = elem;\n }\n\n async initialize() {\n this.nodeId = (this._host as any).getAttribute('nodeId');\n\n if (!this.nodeId) {\n console.warn('Could not get node id in DataProvider.');\n return;\n }\n\n this.container = this._requestInstance('container');\n\n if (!this.container) {\n console.warn('Could not get data in DataProvider. Container was not defined.');\n return;\n }\n const platform = await ComponentPlatform.getInstance(this.container);\n this.node = platform.nodes.get(this.nodeId);\n\n if (!this.node) {\n console.warn(`Could not get component node with ID: ${this.nodeId}.`);\n return;\n }\n }\n\n _requestInstance(key: string) {\n const event = new CustomEvent<{ key: string; instance?: any }>('request-instance', {\n detail: { key },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n (this._host as any).dispatchEvent(event);\n\n return event.detail.instance;\n }\n}\n\nexport class NotificationRowDataProvider extends DataProvider {\n host;\n\n constructor(host: ReactiveControllerHost) {\n super(host as any);\n (this.host = host).addController(this);\n }\n\n hostConnected() {\n this.initialize();\n }\n\n async initialize() {\n await super.initialize();\n\n this._fetch();\n }\n\n async _fetch() {\n if (!this.node) {\n return;\n }\n this.node.writeProperties({\n ...this.node.attributes.properties,\n loading: true,\n error: undefined,\n notifications: [],\n });\n\n const {\n topNotifications = [],\n bottomNotifications = [],\n middleNotifications = [],\n } = await this.container?.getAsync('dataClient').then((dataClient) => {\n return dataClient.fetch('row-notices', {\n // categories: [ TODO: missing\n // input.params.guideCategory,\n // input.params.contactCategory,\n // ].filter((c) => !!c),\n // searchPhrase: input.params.phrase,\n });\n });\n\n let newNotifications: Notification[] = [];\n const { notifications, types = [] } = this.node.attributes.properties;\n if (types.length) {\n if (types.indexOf('top') > -1) {\n newNotifications = newNotifications.concat(topNotifications);\n }\n if (types.indexOf('middle') > -1) {\n newNotifications = newNotifications.concat(middleNotifications);\n }\n if (types.indexOf('bottom') > -1) {\n newNotifications = newNotifications.concat(bottomNotifications);\n }\n } else {\n newNotifications = topNotifications;\n }\n\n this.node.writeProperties({\n ...this.node.attributes.properties,\n loading: false,\n error: undefined,\n notifications: newNotifications.length ? newNotifications : notifications,\n });\n }\n}\n","import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport default class NotificationRow extends LitElement {\n @property({ type: Boolean })\n _allowPaging = false;\n\n @property({ type: Boolean })\n _expandable = false;\n\n @property({ type: String })\n _closeAriaLabel = '';\n\n @property({ type: String })\n _pageNextAriaLabel = '';\n\n @property({ type: String })\n _expandAriaLabel = '';\n\n @property({ type: String })\n _pagePreviousAriaLabel = '';\n\n @property({ type: Array })\n _types: string[] = [];\n\n @property({ type: Array })\n _notifications: any[] = []; // TODO: no any\n\n @state() closed: string[] = [];\n\n @property({ reflect: true }) expanded = false;\n\n @state() index = 0;\n\n // const CloseButton = styled(StyledButton)`\n // svg {\n // vertical-align: middle;\n // line,\n // path {\n // stroke: ${(p) => p.theme.colors?.text};\n // }\n // }\n // `;\n\n static styles = [\n // genericHtml,\n css`\n :host::part(close-button) {\n position: absolute;\n top: 7.5px;\n right: 7.5px;\n width: 25px;\n height: auto;\n padding: calc(var(--size-small) / 2) var(--size-small);\n }\n\n :host::part(pager) {\n text-align: center;\n width: 100%;\n }\n\n :host::part(pager) span {\n font-size: var(--fonts-small);\n display: inline-block;\n width: 30px;\n text-align: center;\n }\n\n i {\n color: var(--colors-text);\n }\n\n a {\n color: var(--colors-link);\n }\n\n .notification-row {\n padding: var(--size-normal) calc(var(--cardinal) * 12);\n text-align: center;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n background-color: var(\n --notification-row-background,\n var(--notification-row-background-default)\n );\n color: var(--colors-text);\n border-radius: var(--borderRadius);\n }\n\n .notification-row.expandable {\n cursor: pointer;\n }\n\n .notification-row.not-expandable ui-html {\n max-width: 100%;\n }\n\n .notification-row.not-expandable ui-html p {\n display: none;\n }\n .notification-row.not-expandable ui-html p:first-child {\n display: block;\n margin-bottom: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .notification-row[data-allow-paging='false'] {\n flex-wrap: wrap;\n }\n .notification-row[data-allow-paging='false'] > div {\n min-width: 100%;\n margin: var(--cardinal * 2);\n }\n\n ui-html {\n flex: 1;\n font-size: var(--fonts-normal);\n line-height: 1.6em;\n font-weight: 300;\n }\n\n ui-button::part(container) {\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: opacity 200ms ease-out;\n justify-self: flex-end;\n align-self: flex-start;\n padding: var(--size-small);\n }\n\n ui-button::part(container):focus-visible {\n outline: var(--accessibility-border);\n color: var(--accessibility-colors-inactiveText);\n border-color: transparent;\n }\n\n ui-button::part(container[data-disabled]) {\n display: none;\n }\n\n ui-button[data-disabled='true']::part(container) {\n opacity: 0.8;\n }\n\n @media (hover: hover) {\n ui-button[data-disabled='false']:hover::part(container) {\n opacity: 0.5;\n }\n }\n `,\n ];\n\n connectedCallback() {\n super.connectedCallback();\n }\n\n private _toggleExpand() {\n this.expanded = !this.expanded;\n }\n\n private getBackgroundColor() {\n if (this._types.length) {\n if (this._types.indexOf('top') > -1) {\n return '--colors-warning';\n } else if (this._types.indexOf('bottom') > -1) {\n return '--colors-transparent';\n }\n return '--colors-primary';\n }\n return '--colors-warning';\n }\n\n render() {\n this.style.setProperty(\n '--notification-row-background-default',\n `var(${this.getBackgroundColor()})`\n );\n\n const filtered = this._notifications.filter(({ id }) => this.closed.indexOf(id) === -1);\n\n if (!filtered.length) {\n return nothing;\n }\n const classes = {\n 'humany-notification-row': true,\n 'notification-row': true,\n expandable: this._expandable,\n expanded: this.expanded,\n 'not-expandable': this._expandable && !this.expanded,\n };\n\n this._allowPaging = true;\n\n if (this._allowPaging) {\n const notification =\n filtered[this.index] || filtered[this.index + 1] || filtered[this.index - 1];\n\n const { id, body } = notification || {};\n\n return html`\n <!-- onKeyDown={(e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n toggleExpand();\n }\n }}\n onClick={toggleExpand} -->\n <div\n class=${classMap(classes)}\n part=\"container\"\n data-expandable=${this._expandable}\n data-allow-paging=${this._allowPaging}\n aria-expanded=${this._expandable ? this.expanded : true}\n aria-label=${this._expandAriaLabel}\n tabindex=${this._expandable ? 0 : -1}\n @click=${() => {\n this._toggleExpand();\n }}\n >\n <ui-button\n class=\"notification-row-close-button\"\n part=\"close-button\"\n aria-label=${this._closeAriaLabel}\n @click=${() => {\n this.index = filtered.indexOf(notification);\n this.closed = [...this.closed, id];\n }}\n >\n <ui-symbol-badge .symbol=${{ type: 'Svg', content: 'close' }} />\n </ui-button>\n <ui-html\n data-pageable=${length > 1}\n data-notification=${id}\n data-expandable=${this._expandable}\n data-expanded=${this.expanded}\n .html=${body}\n />\n <div class=\"notification-row-pager\" part=\"pager\">\n <ui-button\n aria-label=${this._pagePreviousAriaLabel}\n data-disabled=${this.index === 0}\n @click=${(e: Event) => {\n e.stopPropagation();\n if (this.index > 0) {\n this.index -= 1;\n }\n }}\n part=\"arrow-button\"\n >\n <ui-symbol-badge\n .size=${10}\n .symbol=${{ type: 'Svg', content: 'caret-left' }}\n part=\"arrow-icon\"\n />\n </ui-button>\n <span> ${this.index + 1}/${filtered.length} </span>\n <ui-button\n aria-label=${this._pageNextAriaLabel}\n data-disabled=${this.index + 1 >= filtered.length}\n @click=${(e: Event) => {\n e.stopPropagation();\n if (this.index < filtered.length - 1) {\n this.index += 1;\n }\n }}\n part=\"arrow-button\"\n >\n <ui-symbol-badge\n .size=${10}\n .symbol=${{ type: 'Svg', content: 'caret-right' }}\n part=\"arrow-icon\"\n />\n </ui-button>\n </div>\n </div>\n `;\n }\n\n // data-pageable=\"false\"\n // data-types=${types}\n // data-allow-paging=\"false\"\n // className={appendClassNames(className, 'humany-notification-row')}\n return html`\n <div part=\"container\" class=${classMap(classes)} data-expandable=${this._expandable}>\n ${filtered.map((notification) => {\n if (!notification) {\n return nothing;\n }\n\n return html` <ui-html .html=${notification.body} /> `;\n })}\n </div>\n `;\n }\n}\n","// import { NodeConnector, WidgetComponentMixin } from '@telia-ace/knowledge-widget-ui';\n// import NotificationRow from './notification-row';\nimport { NotificationRowDataProvider } from './notification-row-data-provider';\n\nimport { NodeConnector, WidgetComponentMixin } from '@telia-ace/widget-ui';\nimport NotificationRow from './notification-row';\n\n// type Constructor<T = {}> = new (...args: any[]) => T;\n// type TestType = <T extends Constructor<LitElement>>(Base: T);\n\nexport default class NotificationRowWrapper extends WidgetComponentMixin(NotificationRow) {\n connector = new NodeConnector(this);\n dataProvider = new NotificationRowDataProvider(this);\n\n constructor() {\n super();\n }\n}\n"],"names":["DataProvider","elem","__async","platform","ComponentPlatform","key","event","NotificationRowDataProvider","host","__superGet","__spreadProps","__spreadValues","topNotifications","bottomNotifications","middleNotifications","_a","dataClient","newNotifications","notifications","types","NotificationRow","LitElement","filtered","id","nothing","classes","notification","body","html","classMap","e","css","__decorateClass","property","state","NotificationRowWrapper","WidgetComponentMixin","NodeConnector"],"mappings":"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"}