npm - @telia-ace/knowledge-widget-components-notification-row - Versions diffs - 1.0.38-experimental.1 → 1.0.38-experimental.10 - Mend

@telia-ace/knowledge-widget-components-notification-row 1.0.38-experimental.1 → 1.0.38-experimental.10

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 (7) hide show

package/dist/index.js +1 -1
package/dist/notification-row-data-provider.d.ts +1 -12
package/dist/{notification-row-wrapper.297e86c1.js → notification-row-wrapper.ca131e7d.js} +84 -107
package/dist/notification-row-wrapper.ca131e7d.js.map +1 -0
package/dist/notification-row.d.ts +1 -0
package/package.json +9 -8
package/dist/notification-row-wrapper.297e86c1.js.map +0 -1

package/dist/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ const i = (o) => {
   return e(t), n(
     o,
     "notification-row",
-    import("./notification-row-wrapper.297e86c1.js"),
+    import("./notification-row-wrapper.ca131e7d.js"),
     (r) => {
     }
   );

package/dist/notification-row-data-provider.d.ts CHANGED Viewed

@@ -1,15 +1,5 @@
 import { ReactiveControllerHost } from 'lit';
-import { ComponentNode } from '@telia-ace/knowledge-widget-core';
-import { Container } from '@webprovisions/platform';
-declare class DataProvider {
-    private _host;
-    node: ComponentNode | undefined;
-    nodeId: string;
-    container: Container | undefined;
-    constructor(elem: HTMLElement);
-    initialize(): Promise<void>;
-    _requestInstance(key: string): any;
-}
+import { DataProvider } from '@telia-ace/widget-ui';
 export declare class NotificationRowDataProvider extends DataProvider {
     host: ReactiveControllerHost;
     constructor(host: ReactiveControllerHost);
@@ -17,4 +7,3 @@ export declare class NotificationRowDataProvider extends DataProvider {
     initialize(): Promise<void>;
     _fetch(): Promise<void>;
 }
-export {};

package/dist/{notification-row-wrapper.297e86c1.js → notification-row-wrapper.ca131e7d.js} RENAMED Viewed

@@ -1,68 +1,37 @@
-var P = Object.defineProperty, C = Object.defineProperties;
+var P = Object.defineProperty, k = Object.defineProperties;
 var A = Object.getOwnPropertyDescriptors;
-var y = Object.getOwnPropertySymbols, k = Object.getPrototypeOf, L = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable, O = Reflect.get;
-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) => {
+var y = Object.getOwnPropertySymbols, C = Object.getPrototypeOf, L = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable, O = Reflect.get;
+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) => {
   for (var e in t || (t = {}))
-    L.call(t, e) && w(a, e, t[e]);
+    L.call(t, e) && w(i, e, t[e]);
   if (y)
     for (var e of y(t))
-      z.call(t, e) && w(a, e, t[e]);
-  return a;
-}, f = (a, t) => C(a, A(t));
-var m = (a, t, e) => O(k(a), e, t);
-var h = (a, t, e) => new Promise((o, i) => {
-  var l = (d) => {
+      z.call(t, e) && w(i, e, t[e]);
+  return i;
+}, f = (i, t) => k(i, A(t));
+var m = (i, t, e) => O(C(i), e, t);
+var u = (i, t, e) => new Promise((o, n) => {
+  var a = (c) => {
     try {
-      c(e.next(d));
-    } catch (u) {
-      i(u);
+      p(e.next(c));
+    } catch (h) {
+      n(h);
     }
-  }, n = (d) => {
+  }, s = (c) => {
     try {
-      c(e.throw(d));
-    } catch (u) {
-      i(u);
+      p(e.throw(c));
+    } catch (h) {
+      n(h);
     }
-  }, c = (d) => d.done ? o(d.value) : Promise.resolve(d.value).then(l, n);
-  c((e = e.apply(a, t)).next());
+  }, p = (c) => c.done ? o(c.value) : Promise.resolve(c.value).then(a, s);
+  p((e = e.apply(i, t)).next());
 });
-import { ComponentPlatform as I } from "@telia-ace/knowledge-widget-core";
-import { WidgetComponentMixin as E, NodeConnector as N } from "@telia-ace/widget-ui";
-import { LitElement as S, nothing as v, html as g, css as D } from "lit";
-import { property as p, state as $ } from "lit/decorators.js";
+import { DataClient as N } from "@telia-ace/knowledge-data-client";
+import { DataProvider as E, WidgetComponentMixin as S, NodeConnector as D } from "@telia-ace/widget-ui";
+import { LitElement as B, nothing as v, html as g, css as R } from "lit";
+import { property as d, state as $ } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
-class B {
-  constructor(t) {
-    this.nodeId = "", this._host = t;
-  }
-  initialize() {
-    return h(this, null, function* () {
-      if (this.nodeId = this._host.getAttribute("nodeId"), !this.nodeId) {
-        console.warn("Could not get node id in DataProvider.");
-        return;
-      }
-      if (this.container = this._requestInstance("container"), !this.container) {
-        console.warn("Could not get data in DataProvider. Container was not defined.");
-        return;
-      }
-      const t = yield I.getInstance(this.container);
-      if (this.node = t.nodes.get(this.nodeId), !this.node) {
-        console.warn(`Could not get component node with ID: ${this.nodeId}.`);
-        return;
-      }
-    });
-  }
-  _requestInstance(t) {
-    const e = new CustomEvent("request-instance", {
-      detail: { key: t },
-      bubbles: !0,
-      composed: !0,
-      cancelable: !0
-    });
-    return this._host.dispatchEvent(e), e.detail.instance;
-  }
-}
-class x extends B {
+class x extends E {
   constructor(t) {
     super(t), (this.host = t).addController(this);
   }
@@ -70,43 +39,47 @@ class x extends B {
     this.initialize();
   }
   initialize() {
-    return h(this, null, function* () {
+    return u(this, null, function* () {
       yield m(x.prototype, this, "initialize").call(this), this._fetch();
     });
   }
   _fetch() {
-    return h(this, null, function* () {
-      var c;
-      if (!this.node)
+    return u(this, null, function* () {
+      if (!this.node || !this.container)
         return;
       this.node.writeProperties(f(b({}, this.node.attributes.properties), {
         loading: !0,
         error: void 0,
         notifications: []
       }));
+      const t = yield N.getInstance(this.container);
+      if (!t) {
+        console.warn("Unable to get DataClient in NotificationRow.");
+        return;
+      }
       const {
-        topNotifications: t = [],
-        bottomNotifications: e = [],
-        middleNotifications: o = []
-      } = yield (c = this.container) == null ? void 0 : c.getAsync("dataClient").then((d) => d.fetch("row-notices", {}));
-      let i = [];
-      const { notifications: l, types: n = [] } = this.node.attributes.properties;
-      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), {
+        topNotifications: e = [],
+        bottomNotifications: o = [],
+        middleNotifications: n = []
+      } = yield t.fetch("row-notices", {});
+      let a = [];
+      const { notifications: s, types: p = [] } = this.node.attributes.properties;
+      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), {
         loading: !1,
         error: void 0,
-        notifications: i.length ? i : l
+        notifications: a.length ? a : s
       }));
     });
   }
 }
-var j = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (a, t, e, o) => {
-  for (var i = o > 1 ? void 0 : o ? q(t, e) : t, l = a.length - 1, n; l >= 0; l--)
-    (n = a[l]) && (i = (o ? n(t, e, i) : n(i)) || i);
-  return o && i && j(t, e, i), i;
+var j = Object.defineProperty, K = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
+  for (var n = o > 1 ? void 0 : o ? K(t, e) : t, a = i.length - 1, s; a >= 0; a--)
+    (s = i[a]) && (n = (o ? s(t, e, n) : s(n)) || n);
+  return o && n && j(t, e, n), n;
 };
-class r extends S {
+class r extends B {
   constructor() {
-    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;
+    super(), this._closeAriaLabel = "", this._pagePreviousAriaLabel = "", this._pageNextAriaLabel = "", this._types = [], this._notifications = [], this._expandable = !1, this._allowPaging = !1, this.expanded = !1, this.index = 0, this.closed = [];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -133,7 +106,7 @@ class r extends S {
       "not-expandable": this._expandable && !this.expanded
     };
     if (this._allowPaging = !0, this._allowPaging) {
-      const o = t[this.index] || t[this.index + 1] || t[this.index - 1], { id: i, body: l } = o || {};
+      const o = t[this.index] || t[this.index + 1] || t[this.index - 1], { id: n, body: a } = o || {};
       return g`
                 <!-- onKeyDown={(e: React.KeyboardEvent) => {
                     if (e.key === 'Enter') {
@@ -158,24 +131,24 @@ class r extends S {
                         part="close-button"
                         aria-label=${this._closeAriaLabel}
                         @click=${() => {
-        this.index = t.indexOf(o), this.closed = [...this.closed, i];
+        this.index = t.indexOf(o), this.closed = [...this.closed, n];
       }}
                     >
                         <ui-symbol-badge .symbol=${{ type: "Svg", content: "close" }} />
                     </ui-button>
                     <ui-html
                         data-pageable=${length > 1}
-                        data-notification=${i}
+                        data-notification=${n}
                         data-expandable=${this._expandable}
                         data-expanded=${this.expanded}
-                        .html=${l}
-                    />
+                        .html=${a}
+                    ></ui-html>
                     <div class="notification-row-pager" part="pager">
                         <ui-button
                             aria-label=${this._pagePreviousAriaLabel}
                             data-disabled=${this.index === 0}
-                            @click=${(n) => {
-        n.stopPropagation(), this.index > 0 && (this.index -= 1);
+                            @click=${(s) => {
+        s.stopPropagation(), this.index > 0 && (this.index -= 1);
       }}
                             part="arrow-button"
                         >
@@ -189,8 +162,8 @@ class r extends S {
                         <ui-button
                             aria-label=${this._pageNextAriaLabel}
                             data-disabled=${this.index + 1 >= t.length}
-                            @click=${(n) => {
-        n.stopPropagation(), this.index < t.length - 1 && (this.index += 1);
+                            @click=${(s) => {
+        s.stopPropagation(), this.index < t.length - 1 && (this.index += 1);
       }}
                             part="arrow-button"
                         >
@@ -212,7 +185,7 @@ class r extends S {
   }
 }
 r.styles = [
-  D`
+  R`
             :host::part(close-button) {
                 position: absolute;
                 top: 7.5px;
@@ -291,6 +264,10 @@ r.styles = [
                 font-weight: 300;
             }
+            ui-html > div p:only-child {
+                margin: 0;
+            }
             ui-button::part(container) {
                 background-color: transparent;
                 border: none;
@@ -322,45 +299,45 @@ r.styles = [
             }
         `
 ];
-s([
-  p({ type: Boolean })
+l([
+  d({ type: Boolean })
 ], r.prototype, "_allowPaging", 2);
-s([
-  p({ type: Boolean })
+l([
+  d({ type: Boolean })
 ], r.prototype, "_expandable", 2);
-s([
-  p({ type: String })
+l([
+  d({ type: String })
 ], r.prototype, "_closeAriaLabel", 2);
-s([
-  p({ type: String })
+l([
+  d({ type: String })
 ], r.prototype, "_pageNextAriaLabel", 2);
-s([
-  p({ type: String })
+l([
+  d({ type: String })
 ], r.prototype, "_expandAriaLabel", 2);
-s([
-  p({ type: String })
+l([
+  d({ type: String })
 ], r.prototype, "_pagePreviousAriaLabel", 2);
-s([
-  p({ type: Array })
+l([
+  d({ type: Array })
 ], r.prototype, "_types", 2);
-s([
-  p({ type: Array })
+l([
+  d({ type: Array })
 ], r.prototype, "_notifications", 2);
-s([
+l([
   $()
 ], r.prototype, "closed", 2);
-s([
-  p({ reflect: !0 })
+l([
+  d({ reflect: !0 })
 ], r.prototype, "expanded", 2);
-s([
+l([
   $()
 ], r.prototype, "index", 2);
-class G extends E(r) {
+class F extends S(r) {
   constructor() {
-    super(), this.connector = new N(this), this.dataProvider = new x(this);
+    super(), this.connector = new D(this), this.dataProvider = new x(this);
   }
 }
 export {
-  G as default
+  F as default
 };
-//# sourceMappingURL=notification-row-wrapper.297e86c1.js.map
+//# sourceMappingURL=notification-row-wrapper.ca131e7d.js.map

package/dist/notification-row-wrapper.ca131e7d.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"notification-row-wrapper.ca131e7d.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 declare _allowPaging;\n\n @property({ type: Boolean })\n declare _expandable;\n\n @property({ type: String })\n declare _closeAriaLabel: string;\n\n @property({ type: String })\n declare _pageNextAriaLabel: string;\n\n @property({ type: String })\n declare _expandAriaLabel: string;\n\n @property({ type: String })\n declare _pagePreviousAriaLabel;\n\n @property({ type: Array })\n declare _types: string[];\n\n @property({ type: Array })\n declare _notifications: any[]; // TODO: no any\n\n @state()\n declare closed: string[];\n\n @property({ reflect: true })\n declare expanded: boolean;\n\n @state()\n declare index: number;\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-html > div p:only-child {\n margin: 0;\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 constructor() {\n super();\n this._closeAriaLabel = '';\n this._pagePreviousAriaLabel = '';\n this._pageNextAriaLabel = '';\n this._types = [];\n this._notifications = [];\n this._expandable = false;\n this._allowPaging = false;\n this.expanded = false;\n this.index = 0;\n this.closed = [];\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 \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 ></ui-html>\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/dist/notification-row.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export default class NotificationRow extends LitElement {
     expanded: boolean;
     index: number;
     static styles: import("lit").CSSResult[];
+    constructor();
     connectedCallback(): void;
     private _toggleExpand;
     private getBackgroundColor;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/knowledge-widget-components-notification-row",
-  "version": "1.0.38-experimental.1",
+  "version": "1.0.38-experimental.10",
   "description": "Notification row component for ACE Knowledge Widgets.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -21,12 +21,13 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@telia-ace/knowledge-widget-core": "1.0.34-experimental.1",
-    "@telia-ace/knowledge-widget-types-grid": "1.0.45-experimental.1",
-    "@telia-ace/knowledge-widget-ui": "1.0.40-experimental.1",
-    "@telia-ace/widget-services": "^1.0.21-experimental.13",
-    "@telia-ace/widget-ui": "^1.0.28-experimental.13",
-    "@telia-ace/widget-utilities": "^1.0.10-experimental.13",
+    "@telia-ace/knowledge-data-client": "^1.0.2-experimental.1",
+    "@telia-ace/knowledge-widget-core": "1.0.34-experimental.10",
+    "@telia-ace/knowledge-widget-types-grid": "1.0.45-experimental.10",
+    "@telia-ace/knowledge-widget-ui": "1.0.40-experimental.10",
+    "@telia-ace/widget-services": "^1.0.21-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": {
@@ -41,7 +42,7 @@
     "@emotion/styled": "^11.10.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
-    "lit": "^2.6.0",
+    "lit": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/notification-row-wrapper.297e86c1.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"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 \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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"}