@telia-ace/knowledge-widget-components-notification-row 1.0.24-next.2 → 1.0.24-next.3

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.
Files changed (6) hide show
  1. package/dist/index.js +24 -24
  2. package/dist/index.js.map +1 -1
  3. package/dist/{notification-row.7efcaf9d.js → notification-row.22bd8b61.js} +6 -5
  4. package/dist/notification-row.22bd8b61.js.map +1 -0
  5. package/package.json +8 -7
  6. package/dist/notification-row.7efcaf9d.js.map +0 -1
package/dist/index.js CHANGED
@@ -1,26 +1,26 @@
1
1
  var m = Object.defineProperty, b = Object.defineProperties;
2
- var y = Object.getOwnPropertyDescriptors;
2
+ var C = Object.getOwnPropertyDescriptors;
3
3
  var g = Object.getOwnPropertySymbols;
4
- var C = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
4
+ var y = Object.prototype.hasOwnProperty, R = Object.prototype.propertyIsEnumerable;
5
5
  var p = (t, e, i) => e in t ? m(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, h = (t, e) => {
6
6
  for (var i in e || (e = {}))
7
- C.call(e, i) && p(t, i, e[i]);
7
+ y.call(e, i) && p(t, i, e[i]);
8
8
  if (g)
9
9
  for (var i of g(e))
10
- v.call(e, i) && p(t, i, e[i]);
10
+ R.call(e, i) && p(t, i, e[i]);
11
11
  return t;
12
- }, d = (t, e) => b(t, y(e));
13
- import { createEventSubscriber as x, extendComponent as R } from "@telia-ace/knowledge-widget-core";
12
+ }, d = (t, e) => b(t, C(e));
13
+ import { createEventSubscriber as v, extendComponent as x } from "@telia-ace/knowledge-widget-core";
14
14
  import { DataType as D } from "@telia-ace/knowledge-widget-types-grid";
15
- import { createReactComponent as O } from "@telia-ace/knowledge-widget-ui";
16
- const S = (t) => {
17
- const { events: e } = t.get("$widget"), [i, u] = x(e);
18
- return O(
15
+ import { createReactComponent as N } from "@telia-ace/knowledge-widget-ui";
16
+ const O = (t) => {
17
+ const { events: e } = t.get("$widget"), [i, u] = v(e);
18
+ return N(
19
19
  t,
20
20
  "notification-row",
21
- import("./notification-row.7efcaf9d.js"),
21
+ import("./notification-row.22bd8b61.js"),
22
22
  (r) => {
23
- const c = (a) => {
23
+ const s = (a) => {
24
24
  r.writeProperties(d(h({}, r.properties()), {
25
25
  loading: !0,
26
26
  error: void 0,
@@ -41,30 +41,30 @@ const S = (t) => {
41
41
  loading: !0,
42
42
  notifications: []
43
43
  });
44
- let s = [];
45
- const { notifications: w, types: n = [] } = r.properties();
46
- return n.length ? (n.indexOf("top") > -1 && (s = s.concat(o)), n.indexOf("middle") > -1 && (s = s.concat(l)), n.indexOf("bottom") > -1 && (s = s.concat(f))) : s = o, r.actions.dispatch("fetched", {
47
- notifications: s.length ? s : w,
44
+ let n = [];
45
+ const { notifications: w, types: c = [] } = r.properties();
46
+ return c.length ? (c.indexOf("top") > -1 && (n = n.concat(o)), c.indexOf("middle") > -1 && (n = n.concat(l)), c.indexOf("bottom") > -1 && (n = n.concat(f))) : n = o, r.actions.dispatch("fetched", {
47
+ notifications: n.length ? n : w,
48
48
  loading: !1
49
49
  });
50
50
  }
51
51
  ), r.actions.create("fetched", (a) => r.writeProperties(d(h({}, a), { loading: !1 }))), t.getAsync("router").then((a) => {
52
52
  const { params: o } = a.getRouteData();
53
- c(o);
53
+ s(o);
54
54
  }), i("router:changed", (a, { current: o }) => {
55
- c(o.routeData.params);
55
+ s(o.routeData.params);
56
56
  }), () => {
57
57
  u();
58
58
  };
59
59
  }
60
- ).then(() => R(t, "notification-row", (r) => {
61
- r.actions.watch("notification-row.fetch", (c, a) => t.getAsync("dataClient").then(
60
+ ).then(() => x(t, "notification-row", (r) => {
61
+ r.actions.watch("notification-row.fetch", (s, a) => t.getAsync("dataClient").then(
62
62
  (o) => o.fetch(D.RowNotifications, {
63
63
  categories: [
64
- c.params.guideCategory,
65
- c.params.contactCategory
64
+ s.params.guideCategory,
65
+ s.params.contactCategory
66
66
  ].filter((f) => !!f),
67
- searchPhrase: c.params.phrase
67
+ searchPhrase: s.params.phrase
68
68
  })
69
69
  ).then(a).catch((o) => {
70
70
  if (o)
@@ -73,7 +73,7 @@ const S = (t) => {
73
73
  })).then(() => {
74
74
  u();
75
75
  });
76
- };
76
+ }, S = O;
77
77
  export {
78
78
  S as default
79
79
  };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\n createEventSubscriber,\n extendComponent,\n Notification,\n} from '@telia-ace/knowledge-widget-core';\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\nimport { Container, Widget } from '@webprovisions/platform';\n\ntype NotificationType = 'top' | 'middle' | 'bottom';\nexport type NotificationRowComponentProps = {\n types: NotificationType[];\n allowPaging?: boolean;\n notifications?: Notification[]; // internal\n expandable?: boolean;\n pageNextAriaLabel?: string;\n pagePreviousAriaLabel?: string;\n closeAriaLabel?: string;\n expandAriaLabel?: string;\n};\n\ntype FetchResults = NotificationResults & { error: any };\n\nexport const NotificationRowComponent = (container: Container) => {\n const { events }: Widget = container.get('$widget');\n const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n return createReactComponent(\n container,\n 'notification-row',\n import('./notification-row'),\n (component) => {\n const fetch = (params: { [key: string]: any }) => {\n component.writeProperties({\n ...component.properties<NotificationRowComponentProps>(),\n loading: true,\n error: undefined,\n notifications: [],\n });\n component.actions.dispatch('fetch', { params });\n };\n\n component.actions.create(\n 'fetch',\n ({\n error,\n topNotifications,\n bottomNotifications,\n middleNotifications,\n }: FetchResults) => {\n if (error) {\n return component.actions.dispatch('fetched', {\n error,\n loading: true,\n notifications: [],\n });\n }\n\n let newNotifications: Notification[] = [];\n const { notifications, types = [] } =\n component.properties<NotificationRowComponentProps>();\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 return component.actions.dispatch('fetched', {\n notifications: newNotifications.length ? newNotifications : notifications,\n loading: false,\n });\n }\n );\n\n component.actions.create('fetched', (input) => {\n return component.writeProperties({ ...input, loading: false });\n });\n\n container.getAsync('router').then((router) => {\n const { params } = router.getRouteData();\n fetch(params);\n });\n\n subscribe('router:changed', (event: any, { current }: any) => {\n fetch(current.routeData.params);\n });\n\n return () => {\n unsubscribe();\n };\n }\n )\n .then(() => {\n return extendComponent(container, 'notification-row', (component) => {\n component.actions.watch('notification-row.fetch', (input, next) => {\n return container\n .getAsync('dataClient')\n .then((dataClient: DataClient) =>\n dataClient.fetch(DataType.RowNotifications, {\n categories: [\n input.params.guideCategory,\n input.params.contactCategory,\n ].filter((c) => !!c),\n searchPhrase: input.params.phrase,\n })\n )\n .then(next)\n .catch((error) => {\n if (error) {\n return next(error);\n }\n });\n });\n });\n })\n .then(() => {\n unsubscribe();\n });\n};\n\nexport default NotificationRowComponent;\n"],"names":["NotificationRowComponent","container","events","subscribe","unsubscribe","createEventSubscriber","createReactComponent","component","fetch","params","__spreadProps","__spreadValues","error","topNotifications","bottomNotifications","middleNotifications","newNotifications","notifications","types","input","router","event","current","extendComponent","next","dataClient","DataType","c"],"mappings":";;;;;;;;;;;;;;;AAuBa,MAAAA,IAA2B,CAACC,MAAyB;AAC9D,QAAM,EAAE,QAAAC,EAAmB,IAAAD,EAAU,IAAI,SAAS,GAC5C,CAACE,GAAWC,CAAW,IAAIC,EAAsBH,CAAM;AAEtD,SAAAI;AAAA,IACHL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,CAACM,MAAc;AACL,YAAAC,IAAQ,CAACC,MAAmC;AAC9C,QAAAF,EAAU,gBAAgBG,EAAAC,EAAA,IACnBJ,EAAU,WAA0C,IADjC;AAAA,UAEtB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,eAAe,CAAC;AAAA,QAAA,EACnB,GACDA,EAAU,QAAQ,SAAS,SAAS,EAAE,QAAAE,EAAQ,CAAA;AAAA,MAAA;AAGlD,aAAAF,EAAU,QAAQ;AAAA,QACd;AAAA,QACA,CAAC;AAAA,UACG,OAAAK;AAAA,UACA,kBAAAC;AAAA,UACA,qBAAAC;AAAA,UACA,qBAAAC;AAAA,QAAA,MACgB;AAChB,cAAIH;AACO,mBAAAL,EAAU,QAAQ,SAAS,WAAW;AAAA,cACzC,OAAAK;AAAA,cACA,SAAS;AAAA,cACT,eAAe,CAAC;AAAA,YAAA,CACnB;AAGL,cAAII,IAAmC,CAAA;AACvC,gBAAM,EAAE,eAAAC,GAAe,OAAAC,IAAQ,CAAG,EAAA,IAC9BX,EAAU;AACd,iBAAIW,EAAM,UACFA,EAAM,QAAQ,KAAK,IAAI,OACJF,IAAAA,EAAiB,OAAOH,CAAgB,IAE3DK,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOD,CAAmB,IAE9DG,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOF,CAAmB,MAG/CE,IAAAH,GAGhBN,EAAU,QAAQ,SAAS,WAAW;AAAA,YACzC,eAAeS,EAAiB,SAASA,IAAmBC;AAAA,YAC5D,SAAS;AAAA,UAAA,CACZ;AAAA,QACL;AAAA,MAAA,GAGJV,EAAU,QAAQ,OAAO,WAAW,CAACY,MAC1BZ,EAAU,gBAAgBG,EAAAC,EAAA,IAAKQ,IAAL,EAAY,SAAS,KAAO,CAChE,GAEDlB,EAAU,SAAS,QAAQ,EAAE,KAAK,CAACmB,MAAW;AAC1C,cAAM,EAAE,QAAAX,EAAA,IAAWW,EAAO,aAAa;AACvC,QAAAZ,EAAMC,CAAM;AAAA,MAAA,CACf,GAEDN,EAAU,kBAAkB,CAACkB,GAAY,EAAE,SAAAC,QAAmB;AACpD,QAAAd,EAAAc,EAAQ,UAAU,MAAM;AAAA,MAAA,CACjC,GAEM,MAAM;AACG,QAAAlB;MAAA;AAAA,IAEpB;AAAA,EACJ,EACK,KAAK,MACKmB,EAAgBtB,GAAW,oBAAoB,CAACM,MAAc;AACjE,IAAAA,EAAU,QAAQ,MAAM,0BAA0B,CAACY,GAAOK,MAC/CvB,EACF,SAAS,YAAY,EACrB;AAAA,MAAK,CAACwB,MACHA,EAAW,MAAMC,EAAS,kBAAkB;AAAA,QACxC,YAAY;AAAA,UACRP,EAAM,OAAO;AAAA,UACbA,EAAM,OAAO;AAAA,UACf,OAAO,CAACQ,MAAM,CAAC,CAACA,CAAC;AAAA,QACnB,cAAcR,EAAM,OAAO;AAAA,MAAA,CAC9B;AAAA,MAEJ,KAAKK,CAAI,EACT,MAAM,CAACZ,MAAU;AACd,UAAIA;AACA,eAAOY,EAAKZ,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI,IAAAR;EAAA,CACf;AACT;"}
1
+ {"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\n createEventSubscriber,\n extendComponent,\n Notification,\n} from '@telia-ace/knowledge-widget-core';\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\nimport { Container, Widget } from '@webprovisions/platform';\n\ntype NotificationType = 'top' | 'middle' | 'bottom';\nexport type NotificationRowComponentProps = {\n types: NotificationType[];\n allowPaging?: boolean;\n notifications?: Notification[]; // internal\n expandable?: boolean;\n pageNextAriaLabel?: string;\n pagePreviousAriaLabel?: string;\n closeAriaLabel?: string;\n expandAriaLabel?: string;\n};\n\ntype FetchResults = NotificationResults & { error: any };\n\nexport const NotificationRowComponent = (container: Container) => {\n const { events }: Widget = container.get('$widget');\n const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n return createReactComponent(\n container,\n 'notification-row',\n import('./notification-row'),\n (component) => {\n const fetch = (params: { [key: string]: any }) => {\n component.writeProperties({\n ...component.properties<NotificationRowComponentProps>(),\n loading: true,\n error: undefined,\n notifications: [],\n });\n component.actions.dispatch('fetch', { params });\n };\n\n component.actions.create(\n 'fetch',\n ({\n error,\n topNotifications,\n bottomNotifications,\n middleNotifications,\n }: FetchResults) => {\n if (error) {\n return component.actions.dispatch('fetched', {\n error,\n loading: true,\n notifications: [],\n });\n }\n\n let newNotifications: Notification[] = [];\n const { notifications, types = [] } =\n component.properties<NotificationRowComponentProps>();\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 return component.actions.dispatch('fetched', {\n notifications: newNotifications.length ? newNotifications : notifications,\n loading: false,\n });\n }\n );\n\n component.actions.create('fetched', (input) => {\n return component.writeProperties({ ...input, loading: false });\n });\n\n container.getAsync('router').then((router) => {\n const { params } = router.getRouteData();\n fetch(params);\n });\n\n subscribe('router:changed', (event: any, { current }: any) => {\n fetch(current.routeData.params);\n });\n\n return () => {\n unsubscribe();\n };\n }\n )\n .then(() => {\n return extendComponent(container, 'notification-row', (component) => {\n component.actions.watch('notification-row.fetch', (input, next) => {\n return container\n .getAsync('dataClient')\n .then((dataClient: DataClient) =>\n dataClient.fetch(DataType.RowNotifications, {\n categories: [\n input.params.guideCategory,\n input.params.contactCategory,\n ].filter((c) => !!c),\n searchPhrase: input.params.phrase,\n })\n )\n .then(next)\n .catch((error) => {\n if (error) {\n return next(error);\n }\n });\n });\n });\n })\n .then(() => {\n unsubscribe();\n });\n};\n\nexport default NotificationRowComponent;\n"],"names":["NotificationRowComponent","container","events","subscribe","unsubscribe","createEventSubscriber","createReactComponent","component","fetch","params","__spreadProps","__spreadValues","error","topNotifications","bottomNotifications","middleNotifications","newNotifications","notifications","types","input","router","event","current","extendComponent","next","dataClient","DataType","c","NotificationRowComponent$1"],"mappings":";;;;;;;;;;;;;;;AAuBa,MAAAA,IAA2B,CAACC,MAAyB;AAC9D,QAAM,EAAE,QAAAC,EAAmB,IAAAD,EAAU,IAAI,SAAS,GAC5C,CAACE,GAAWC,CAAW,IAAIC,EAAsBH,CAAM;AAEtD,SAAAI;AAAA,IACHL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,CAACM,MAAc;AACL,YAAAC,IAAQ,CAACC,MAAmC;AAC9C,QAAAF,EAAU,gBAAgBG,EAAAC,EAAA,IACnBJ,EAAU,WAA0C,IADjC;AAAA,UAEtB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,eAAe,CAAC;AAAA,QAAA,EACnB,GACDA,EAAU,QAAQ,SAAS,SAAS,EAAE,QAAAE,EAAQ,CAAA;AAAA,MAAA;AAGlD,aAAAF,EAAU,QAAQ;AAAA,QACd;AAAA,QACA,CAAC;AAAA,UACG,OAAAK;AAAA,UACA,kBAAAC;AAAA,UACA,qBAAAC;AAAA,UACA,qBAAAC;AAAA,QAAA,MACgB;AAChB,cAAIH;AACO,mBAAAL,EAAU,QAAQ,SAAS,WAAW;AAAA,cACzC,OAAAK;AAAA,cACA,SAAS;AAAA,cACT,eAAe,CAAC;AAAA,YAAA,CACnB;AAGL,cAAII,IAAmC,CAAA;AACvC,gBAAM,EAAE,eAAAC,GAAe,OAAAC,IAAQ,CAAG,EAAA,IAC9BX,EAAU;AACd,iBAAIW,EAAM,UACFA,EAAM,QAAQ,KAAK,IAAI,OACJF,IAAAA,EAAiB,OAAOH,CAAgB,IAE3DK,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOD,CAAmB,IAE9DG,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOF,CAAmB,MAG/CE,IAAAH,GAGhBN,EAAU,QAAQ,SAAS,WAAW;AAAA,YACzC,eAAeS,EAAiB,SAASA,IAAmBC;AAAA,YAC5D,SAAS;AAAA,UAAA,CACZ;AAAA,QACL;AAAA,MAAA,GAGJV,EAAU,QAAQ,OAAO,WAAW,CAACY,MAC1BZ,EAAU,gBAAgBG,EAAAC,EAAA,IAAKQ,IAAL,EAAY,SAAS,KAAO,CAChE,GAEDlB,EAAU,SAAS,QAAQ,EAAE,KAAK,CAACmB,MAAW;AAC1C,cAAM,EAAE,QAAAX,EAAA,IAAWW,EAAO,aAAa;AACvC,QAAAZ,EAAMC,CAAM;AAAA,MAAA,CACf,GAEDN,EAAU,kBAAkB,CAACkB,GAAY,EAAE,SAAAC,QAAmB;AACpD,QAAAd,EAAAc,EAAQ,UAAU,MAAM;AAAA,MAAA,CACjC,GAEM,MAAM;AACG,QAAAlB;MAAA;AAAA,IAEpB;AAAA,EACJ,EACK,KAAK,MACKmB,EAAgBtB,GAAW,oBAAoB,CAACM,MAAc;AACjE,IAAAA,EAAU,QAAQ,MAAM,0BAA0B,CAACY,GAAOK,MAC/CvB,EACF,SAAS,YAAY,EACrB;AAAA,MAAK,CAACwB,MACHA,EAAW,MAAMC,EAAS,kBAAkB;AAAA,QACxC,YAAY;AAAA,UACRP,EAAM,OAAO;AAAA,UACbA,EAAM,OAAO;AAAA,UACf,OAAO,CAACQ,MAAM,CAAC,CAACA,CAAC;AAAA,QACnB,cAAcR,EAAM,OAAO;AAAA,MAAA,CAC9B;AAAA,MAEJ,KAAKK,CAAI,EACT,MAAM,CAACZ,MAAU;AACd,UAAIA;AACA,eAAOY,EAAKZ,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI,IAAAR;EAAA,CACf;AACT,GAEAwB,IAAe5B;"}
package/dist/{notification-row.7efcaf9d.js → notification-row.22bd8b61.js} RENAMED
@@ -19,11 +19,12 @@ var k = (e, t) => {
19
19
  t.indexOf(n) < 0 && N.call(e, n) && (a[n] = e[n]);
20
20
  return a;
21
21
  };
22
+ import { css as h } from "@emotion/react";
23
+ import c from "@emotion/styled";
22
24
  import { useProperties as ee, useContainer as te, createEmptyComponent as R, SymbolBadge as F, genericHtml as ae, linkTabStyle as ne, borderTabStyle as G, Html as oe, Button as ie } from "@telia-ace/knowledge-widget-ui";
23
25
  import { readStorage as T, StorageMedium as W, createStorageWriter as le, StorageCategory as re } from "@telia-ace/widget-services";
24
26
  import { appendClassNames as w } from "@telia-ace/widget-utilities";
25
27
  import i, { useState as $, useEffect as K } from "react";
26
- import c, { css as h } from "styled-components";
27
28
  const z = "closed-notifications", se = {
28
29
  transform: {
29
30
  a: (a) => {
@@ -33,7 +34,7 @@ const z = "closed-notifications", se = {
33
34
  }), e);
34
35
  }
35
36
  }
36
- }, he = (a) => {
37
+ }, xe = (a) => {
37
38
  var n = a, { className: e } = n, t = k(n, ["className"]);
38
39
  const {
39
40
  types: O = [],
@@ -194,7 +195,7 @@ const z = "closed-notifications", se = {
194
195
  ${(e) => h`
195
196
  &:focus-visible {
196
197
  ${C} {
197
- ${G}
198
+ ${G(e)}
198
199
  }
199
200
  }
200
201
  `}
@@ -289,6 +290,6 @@ c.div`
289
290
  display: none;
290
291
  `;
291
292
  export {
292
- he as default
293
+ xe as default
293
294
  };
294
- //# sourceMappingURL=notification-row.7efcaf9d.js.map
295
+ //# sourceMappingURL=notification-row.22bd8b61.js.map
package/dist/notification-row.22bd8b61.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"notification-row.22bd8b61.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n borderTabStyle,\n Button,\n createEmptyComponent,\n genericHtml,\n Html,\n linkTabStyle,\n SymbolBadge,\n useContainer,\n useProperties,\n} from '@telia-ace/knowledge-widget-ui';\nimport {\n createStorageWriter,\n readStorage,\n StorageCategory,\n StorageMedium,\n StorageWriter,\n} from '@telia-ace/widget-services';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { useEffect, useState } from 'react';\nimport { NotificationRowComponentProps } from './notification-row-component';\n\ntype Props = {\n className: string;\n};\n\nconst STORAGE_KEY = 'closed-notifications';\n\nconst infocusableHtml = {\n transform: {\n a: ({ children, ...props }: React.ComponentProps<'a'>) => (\n <a {...props} tabIndex={-1}>\n {children}\n </a>\n ),\n },\n};\n\nconst NotificationRow: React.FC<Props> = ({ className, ...other }) => {\n const {\n types = [],\n allowPaging = true,\n notifications = [],\n expandable = false,\n closeAriaLabel = '',\n pageNextAriaLabel = '',\n pagePreviousAriaLabel = '',\n expandAriaLabel = '',\n } = useProperties<NotificationRowComponentProps>();\n const [expanded, setExpanded] = useState(false);\n const [closed, setClosed] = useState<string[]>([]);\n const [index, setIndex] = useState(0);\n\n const container = useContainer();\n const [write, setWriter] = useState<StorageWriter | undefined>();\n\n useEffect(() => {\n if (container) {\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\n (closed = []) => setClosed(closed)\n );\n\n createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\n setWriter(() => writer)\n );\n }\n }, [container]);\n\n useEffect(() => {\n if (container) {\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\n (storedClosed = []) => {\n closed.forEach(\n (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\n );\n if (write) {\n write(storedClosed);\n }\n }\n );\n }\n }, [closed, container, write]);\n\n const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\n\n const { length } = filtered;\n\n if (!filtered.length) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-notification-row'),\n });\n }\n\n if (allowPaging) {\n const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\n\n if (!notification) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-notification-row'),\n });\n }\n\n const { id, body } = notification || {};\n const toggleExpand = () => setExpanded(!expanded);\n\n return (\n <Wrapper\n {...other}\n aria-expanded={expandable ? expanded : true}\n aria-label={expandAriaLabel}\n tabIndex={expandable ? 0 : -1}\n className={appendClassNames(className, 'humany-notification-row')}\n data-pageable={length > 1}\n data-types={types}\n data-allow-paging={allowPaging}\n data-expandable={expandable}\n onKeyDown={(e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n toggleExpand();\n }\n }}\n onClick={toggleExpand}\n >\n <CloseButton\n aria-label={closeAriaLabel}\n onClick={() => {\n setIndex(filtered.indexOf(notification));\n setClosed([...closed, id]);\n }}\n >\n <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\n </CloseButton>\n <StyledHtml\n htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\n data-pageable={length > 1}\n data-notification={id}\n data-expandable={expandable}\n data-expanded={expanded}\n html={body}\n />\n {length > 1 && (\n <Pager>\n <StyledButton\n aria-label={pagePreviousAriaLabel}\n data-disabled={index === 0}\n onClick={(e) => {\n e.stopPropagation();\n if (index > 0) {\n setIndex(index - 1);\n }\n }}\n >\n <StyledSymbolBadge\n size={10}\n symbol={{ type: 'Svg', content: 'caret-left' }}\n />\n </StyledButton>\n <span>\n {index + 1}/{length}\n </span>\n <StyledButton\n aria-label={pageNextAriaLabel}\n data-disabled={index + 1 >= length}\n onClick={(e) => {\n e.stopPropagation();\n if (index < length - 1) {\n setIndex(index + 1);\n }\n }}\n >\n <StyledSymbolBadge\n size={10}\n symbol={{ type: 'Svg', content: 'caret-right' }}\n />\n </StyledButton>\n </Pager>\n )}\n </Wrapper>\n );\n }\n\n return (\n <Wrapper\n {...other}\n className={appendClassNames(className, 'humany-notification-row')}\n data-pageable={false}\n data-types={types}\n data-allow-paging={false}\n >\n {filtered.map((notification) => {\n if (!notification) {\n return null;\n }\n\n const { id, body } = notification;\n\n return (\n <StyledHtml\n key={id}\n data-pageable={false}\n data-expandable={expandable}\n data-expanded={expanded}\n data-notification={id}\n html={body}\n />\n );\n })}\n </Wrapper>\n );\n};\n\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\n ${genericHtml}\n padding: ${(p) => p.theme.sizes?.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\n background-color: ${(p) => {\n if (p['data-types'].length) {\n if (p['data-types'].indexOf('top') > -1) {\n return p.theme.colors?.warning;\n }\n if (p['data-types'].indexOf('bottom') > -1) {\n return 'transparent';\n }\n\n return p.theme.colors?.primary;\n }\n return p.theme.colors?.warning;\n }};\n color: ${(p) => p.theme.colors?.text};\n border-radius: ${(p) => p.theme.borderRadius};\n text-align: center;\n display: flex;\n flex-direction: column;\n position: relative;\n cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\n overflow: hidden;\n\n i {\n color: ${(p) => p.theme.colors?.text};\n }\n\n a {\n color: ${(p) => p.theme.colors?.link};\n &:focus-visible {\n ${linkTabStyle}\n }\n }\n\n ${(p) =>\n !p['data-allow-paging'] &&\n css`\n flex-wrap: wrap;\n\n > div {\n min-width: 100%;\n margin: ${p.theme.sizes?.cardinal * 2}px;\n }\n `};\n\n ${(p) =>\n css`\n &:focus-visible {\n ${StyledHtml} {\n ${borderTabStyle(p)}\n }\n }\n `}\n`;\n\nconst StyledHtml = styled(Html)<{\n 'data-pageable': boolean;\n 'data-expandable': boolean;\n 'data-expanded': boolean;\n}>`\n flex: 1;\n font-size: ${(p) => p.theme.fonts?.normal};\n line-height: 1.6em;\n font-weight: 300;\n\n ${(p) =>\n p['data-expandable'] &&\n !p['data-expanded'] &&\n css`\n max-width: 100%;\n\n p {\n display: none;\n &:first-child {\n display: block;\n margin-bottom: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n `}\n`;\n\nconst Pager = styled.div`\n text-align: center;\n width: 100%;\n span {\n font-size: ${(p) => p.theme.fonts?.small};\n display: inline-block;\n width: 30px;\n text-align: center;\n }\n`;\n\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\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: ${(p) => p.theme.sizes?.small} svg {\n display: block;\n }\n\n &:focus-visible {\n ${borderTabStyle}\n }\n\n ${(p) =>\n p['data-disabled']\n ? css`\n opacity: 0.8;\n `\n : css`\n @media (hover) {\n &:hover {\n opacity: 0.5;\n }\n }\n `}\n`;\n\nconst CloseButton = styled(StyledButton)`\n position: absolute;\n top: 7.5px;\n right: 7.5px;\n width: 25px;\n height: auto;\n padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`};\n svg {\n vertical-align: middle;\n line,\n path {\n stroke: ${(p) => p.theme.colors?.text};\n }\n }\n`;\n\nconst StyledSymbolBadge = styled(SymbolBadge)`\n line {\n stroke: #ffffff;\n }\n`;\n\nconst Empty = styled.div`\n display: none;\n`;\n\nexport default NotificationRow;\n"],"names":["STORAGE_KEY","infocusableHtml","_a","_b","children","props","__objRest","React","__spreadProps","__spreadValues","NotificationRow","className","other","types","allowPaging","notifications","expandable","closeAriaLabel","pageNextAriaLabel","pagePreviousAriaLabel","expandAriaLabel","useProperties","expanded","setExpanded","useState","closed","setClosed","index","setIndex","container","useContainer","write","setWriter","useEffect","readStorage","StorageMedium","createStorageWriter","StorageCategory","writer","storedClosed","id","filtered","length","createEmptyComponent","appendClassNames","notification","body","toggleExpand","Wrapper","e","CloseButton","SymbolBadge","StyledHtml","Pager","StyledButton","StyledSymbolBadge","styled","genericHtml","p","_c","linkTabStyle","css","borderTabStyle","Html","Button"],"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.24-next.2",
3
+ "version": "1.0.24-next.3",
4
4
  "description": "Notification row component for ACE Knowledge Widgets.",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "Telia Company AB",
@@ -34,17 +34,18 @@
34
34
  "@webprovisions/platform": "^1.1.2"
35
35
  },
36
36
  "peerDependencies": {
37
+ "@emotion/react": "^11.10.4",
38
+ "@emotion/styled": "^11.10.4",
37
39
  "react": "^18.2.0",
38
- "react-dom": "^18.2.0",
39
- "styled-components": "^5.3.6"
40
+ "react-dom": "^18.2.0"
40
41
  },
41
42
  "devDependencies": {
43
+ "@emotion/react": "^11.10.4",
44
+ "@emotion/styled": "^11.10.4",
42
45
  "@types/react": "^18.0.21",
43
46
  "@types/react-dom": "^18.0.6",
44
- "@types/styled-components": "^5.1.26",
45
47
  "react": "^18.2.0",
46
- "react-dom": "^18.2.0",
47
- "styled-components": "^5.3.6"
48
+ "react-dom": "^18.2.0"
48
49
  },
49
- "gitHead": "3040596277958342d31410cb8766141e15b985cf"
50
+ "gitHead": "035b7b89fbf7c736993d70e6dc4e420b8218a3a4"
50
51
  }
package/dist/notification-row.7efcaf9d.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"notification-row.7efcaf9d.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import {\n borderTabStyle,\n Button,\n createEmptyComponent,\n genericHtml,\n Html,\n linkTabStyle,\n SymbolBadge,\n useContainer,\n useProperties,\n} from '@telia-ace/knowledge-widget-ui';\nimport {\n createStorageWriter,\n readStorage,\n StorageCategory,\n StorageMedium,\n StorageWriter,\n} from '@telia-ace/widget-services';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { NotificationRowComponentProps } from './notification-row-component';\n\ntype Props = {\n className: string;\n};\n\nconst STORAGE_KEY = 'closed-notifications';\n\nconst infocusableHtml = {\n transform: {\n a: ({ children, ...props }: React.ComponentProps<'a'>) => (\n <a {...props} tabIndex={-1}>\n {children}\n </a>\n ),\n },\n};\n\nconst NotificationRow: React.FC<Props> = ({ className, ...other }) => {\n const {\n types = [],\n allowPaging = true,\n notifications = [],\n expandable = false,\n closeAriaLabel = '',\n pageNextAriaLabel = '',\n pagePreviousAriaLabel = '',\n expandAriaLabel = '',\n } = useProperties<NotificationRowComponentProps>();\n const [expanded, setExpanded] = useState(false);\n const [closed, setClosed] = useState<string[]>([]);\n const [index, setIndex] = useState(0);\n\n const container = useContainer();\n const [write, setWriter] = useState<StorageWriter | undefined>();\n\n useEffect(() => {\n if (container) {\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\n (closed = []) => setClosed(closed)\n );\n\n createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\n setWriter(() => writer)\n );\n }\n }, [container]);\n\n useEffect(() => {\n if (container) {\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\n (storedClosed = []) => {\n closed.forEach(\n (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\n );\n if (write) {\n write(storedClosed);\n }\n }\n );\n }\n }, [closed, container, write]);\n\n const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\n\n const { length } = filtered;\n\n if (!filtered.length) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-notification-row'),\n });\n }\n\n if (allowPaging) {\n const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\n\n if (!notification) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-notification-row'),\n });\n }\n\n const { id, body } = notification || {};\n const toggleExpand = () => setExpanded(!expanded);\n\n return (\n <Wrapper\n {...other}\n aria-expanded={expandable ? expanded : true}\n aria-label={expandAriaLabel}\n tabIndex={expandable ? 0 : -1}\n className={appendClassNames(className, 'humany-notification-row')}\n data-pageable={length > 1}\n data-types={types}\n data-allow-paging={allowPaging}\n data-expandable={expandable}\n onKeyDown={(e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n toggleExpand();\n }\n }}\n onClick={toggleExpand}\n >\n <CloseButton\n aria-label={closeAriaLabel}\n onClick={() => {\n setIndex(filtered.indexOf(notification));\n setClosed([...closed, id]);\n }}\n >\n <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\n </CloseButton>\n <StyledHtml\n htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\n data-pageable={length > 1}\n data-notification={id}\n data-expandable={expandable}\n data-expanded={expanded}\n html={body}\n />\n {length > 1 && (\n <Pager>\n <StyledButton\n aria-label={pagePreviousAriaLabel}\n data-disabled={index === 0}\n onClick={(e) => {\n e.stopPropagation();\n if (index > 0) {\n setIndex(index - 1);\n }\n }}\n >\n <StyledSymbolBadge\n size={10}\n symbol={{ type: 'Svg', content: 'caret-left' }}\n />\n </StyledButton>\n <span>\n {index + 1}/{length}\n </span>\n <StyledButton\n aria-label={pageNextAriaLabel}\n data-disabled={index + 1 >= length}\n onClick={(e) => {\n e.stopPropagation();\n if (index < length - 1) {\n setIndex(index + 1);\n }\n }}\n >\n <StyledSymbolBadge\n size={10}\n symbol={{ type: 'Svg', content: 'caret-right' }}\n />\n </StyledButton>\n </Pager>\n )}\n </Wrapper>\n );\n }\n\n return (\n <Wrapper\n {...other}\n className={appendClassNames(className, 'humany-notification-row')}\n data-pageable={false}\n data-types={types}\n data-allow-paging={false}\n >\n {filtered.map((notification) => {\n if (!notification) {\n return null;\n }\n\n const { id, body } = notification;\n\n return (\n <StyledHtml\n key={id}\n data-pageable={false}\n data-expandable={expandable}\n data-expanded={expanded}\n data-notification={id}\n html={body}\n />\n );\n })}\n </Wrapper>\n );\n};\n\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\n ${genericHtml}\n padding: ${(p) => p.theme.sizes?.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\n background-color: ${(p) => {\n if (p['data-types'].length) {\n if (p['data-types'].indexOf('top') > -1) {\n return p.theme.colors?.warning;\n }\n if (p['data-types'].indexOf('bottom') > -1) {\n return 'transparent';\n }\n\n return p.theme.colors?.primary;\n }\n return p.theme.colors?.warning;\n }};\n color: ${(p) => p.theme.colors?.text};\n border-radius: ${(p) => p.theme.borderRadius};\n text-align: center;\n display: flex;\n flex-direction: column;\n position: relative;\n cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\n overflow: hidden;\n\n i {\n color: ${(p) => p.theme.colors?.text};\n }\n\n a {\n color: ${(p) => p.theme.colors?.link};\n &:focus-visible {\n ${linkTabStyle}\n }\n }\n\n ${(p) =>\n !p['data-allow-paging'] &&\n css`\n flex-wrap: wrap;\n\n > div {\n min-width: 100%;\n margin: ${p.theme.sizes?.cardinal * 2}px;\n }\n `};\n\n ${(p) =>\n css`\n &:focus-visible {\n ${StyledHtml} {\n ${borderTabStyle}\n }\n }\n `}\n`;\n\nconst StyledHtml = styled(Html)<{\n 'data-pageable': boolean;\n 'data-expandable': boolean;\n 'data-expanded': boolean;\n}>`\n flex: 1;\n font-size: ${(p) => p.theme.fonts?.normal};\n line-height: 1.6em;\n font-weight: 300;\n\n ${(p) =>\n p['data-expandable'] &&\n !p['data-expanded'] &&\n css`\n max-width: 100%;\n\n p {\n display: none;\n &:first-child {\n display: block;\n margin-bottom: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n `}\n`;\n\nconst Pager = styled.div`\n text-align: center;\n width: 100%;\n span {\n font-size: ${(p) => p.theme.fonts?.small};\n display: inline-block;\n width: 30px;\n text-align: center;\n }\n`;\n\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\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: ${(p) => p.theme.sizes?.small} svg {\n display: block;\n }\n\n &:focus-visible {\n ${borderTabStyle}\n }\n\n ${(p) =>\n p['data-disabled']\n ? css`\n opacity: 0.8;\n `\n : css`\n @media (hover) {\n &:hover {\n opacity: 0.5;\n }\n }\n `}\n`;\n\nconst CloseButton = styled(StyledButton)`\n position: absolute;\n top: 7.5px;\n right: 7.5px;\n width: 25px;\n height: auto;\n padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`};\n svg {\n vertical-align: middle;\n line,\n path {\n stroke: ${(p) => p.theme.colors?.text};\n }\n }\n`;\n\nconst StyledSymbolBadge = styled(SymbolBadge)`\n line {\n stroke: #ffffff;\n }\n`;\n\nconst Empty = styled.div`\n display: none;\n`;\n\nexport default NotificationRow;\n"],"names":["STORAGE_KEY","infocusableHtml","_a","_b","children","props","__objRest","React","__spreadProps","__spreadValues","NotificationRow","className","other","types","allowPaging","notifications","expandable","closeAriaLabel","pageNextAriaLabel","pagePreviousAriaLabel","expandAriaLabel","useProperties","expanded","setExpanded","useState","closed","setClosed","index","setIndex","container","useContainer","write","setWriter","useEffect","readStorage","StorageMedium","createStorageWriter","StorageCategory","writer","storedClosed","id","filtered","length","createEmptyComponent","appendClassNames","notification","body","toggleExpand","Wrapper","e","CloseButton","SymbolBadge","StyledHtml","Pager","StyledButton","StyledSymbolBadge","styled","genericHtml","p","_c","linkTabStyle","css","borderTabStyle","Html","Button"],"mappings":"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"}