@telia-ace/knowledge-widget-ui 1.0.40-experimental.7 → 1.0.40-experimental.9
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/components/ui-notification-list.d.ts +27 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +97 -2
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Notification } from '@telia-ace/knowledge-widget-core';
|
|
2
|
+
import { Symbol } from '@telia-ace/widget-ui';
|
|
3
|
+
import { LitElement, nothing } from 'lit';
|
|
4
|
+
type INotificationList = {
|
|
5
|
+
id: string;
|
|
6
|
+
title?: string;
|
|
7
|
+
symbol?: Symbol;
|
|
8
|
+
notifications: Notification[];
|
|
9
|
+
defaultHeaderOptions?: {
|
|
10
|
+
visible: boolean;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export declare class NotificationList extends LitElement {
|
|
14
|
+
static styles: import("lit").CSSResult;
|
|
15
|
+
notificationList: INotificationList;
|
|
16
|
+
loading: boolean;
|
|
17
|
+
showHeader: boolean;
|
|
18
|
+
_expanded: string | null;
|
|
19
|
+
constructor();
|
|
20
|
+
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
21
|
+
}
|
|
22
|
+
declare global {
|
|
23
|
+
interface HTMLElementTagNameMap {
|
|
24
|
+
'ui-notification-list': NotificationList;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from '@telia-ace/widget-ui';
|
|
2
|
+
export { NotificationList as NotificationListUi } from './components/ui-notification-list';
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,100 @@
|
|
|
1
|
-
|
|
1
|
+
export * from "@telia-ace/widget-ui";
|
|
2
|
+
import { LitElement as u, nothing as f, html as t, unsafeCSS as v } from "lit";
|
|
3
|
+
import { property as p, state as g } from "lit/decorators.js";
|
|
4
|
+
const w = `.wrapper{overflow:hidden;justify-content:flex-start;padding:var(--notification-list-padding, var(--size-large));margin:var(--notification-list-margin, 0);min-width:var(--notification-list-min-width)}@media (hover: hover){.wrapper button:hover{text-decoration:underline}}.wrapper h1{margin:0 0 var(--size-normal);font-size:var(--fonts-medium);font-weight:400;line-height:1.8em;color:var(--colors-text)}.wrapper h1{display:flex;align-items:center}.wrapper h1 i{margin:7px var(--size-normal) 0 0;width:24px;display:inline-block;vertical-align:text-bottom;align-self:flex-start;min-width:24px;min-height:24px;text-align:center}.wrapper .notification-title{display:none}.wrapper[data-show-header=true] .notification-title{display:block}ul{padding:0;margin:0;list-style:none}ul>li{margin:0 0 var(--size-normal);white-space:nowrap;text-overflow:ellipsis;min-width:0}ul>li:focus{outline-offset:-2px}ul>li>a{text-decoration:none}ul>li:last-child{margin:0}li .notification-body{font-size:var(--fonts-normal);line-height:1.5em;color:var(--colors-text);font-weight:300;display:none}li .notification-body h1,li .notification-body h2,li .notification-body h3,li .notification-body h4,li .notification-body h5,li .notification-body h6{word-break:break-word}li .notification-body h1:first-child,li .notification-body h2:first-child,li .notification-body h3:first-child,li .notification-body h4:first-child,li .notification-body h5:first-child,li .notification-body h6:first-child{margin-top:0}li .notification-body h1:only-child,li .notification-body h2:only-child,li .notification-body h3:only-child,li .notification-body h4:only-child,li .notification-body h5:only-child,li .notification-body h6:only-child{margin:0}li .notification-body h1:last-child,li .notification-body h2:last-child,li .notification-body h3:last-child,li .notification-body h4:last-child,li .notification-body h5:last-child,li .notification-body h6:last-child{margin-bottom:0}li .notification-body a{color:var(--colors-link)}li .notification-body a:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent;text-decoration:underline}li .notification-body img{max-width:100%!important;height:auto!important}li .notification-body p{word-break:break-word;margin:var(--size-normal) 0}li .notification-body p:first-child{margin:0 0 var(--size-normal)}li .notification-body p:last-child{margin:var(--size-normal) 0 0}li .notification-body p:only-child{margin:0}li .notification-body:not(:only-child){margin:var(--size-normal) 0}li .notification-body p{white-space:normal}li[data-expanded=true] .notification-body{display:block}li>span{display:block;font-weight:300;color:var(--colors-accent)}button{-webkit-appearance:button;text-transform:none;overflow:visible;outline:none;border:none;background-color:transparent;cursor:pointer;font-family:inherit;font-size:inherit;line-height:normal;margin:0;padding:0;display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left}button svg,button i{color:var(--colors-primary)}button span{color:var(--colors-text);font-size:var(--fonts-normal);overflow:hidden;text-overflow:ellipsis;flex:1;white-space:nowrap}button:focus-visible{outline:var(--accessibility-border);color:var(--accessibility-colors-inactiveText);border-color:transparent}button:focus-visible span{color:var(--colors-primary);text-decoration:underline}.timestamp{font-size:var(--fonts-small);font-weight:300}ui-symbol-badge{margin:0 0 0 var(--size-small);--icon-color: var(--colors-primary)}
|
|
5
|
+
`;
|
|
6
|
+
var x = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (d, e, o, l) => {
|
|
7
|
+
for (var i = l > 1 ? void 0 : l ? $(e, o) : e, r = d.length - 1, n; r >= 0; r--)
|
|
8
|
+
(n = d[r]) && (i = (l ? n(e, o, i) : n(i)) || i);
|
|
9
|
+
return l && i && x(e, o, i), i;
|
|
10
|
+
};
|
|
11
|
+
class a extends u {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(), this._expanded = null, this.loading = !1, this.showHeader = !1;
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
var n;
|
|
17
|
+
if (!this.notificationList || !((n = this.notificationList) != null && n.notifications) && !this.loading)
|
|
18
|
+
return f;
|
|
19
|
+
const {
|
|
20
|
+
id: e,
|
|
21
|
+
title: o,
|
|
22
|
+
symbol: l,
|
|
23
|
+
notifications: i = [],
|
|
24
|
+
defaultHeaderOptions: r = { visible: !0 }
|
|
25
|
+
} = this.notificationList || {};
|
|
26
|
+
return t`
|
|
27
|
+
<div
|
|
28
|
+
class="wrapper"
|
|
29
|
+
data-notification-category=${this.id}
|
|
30
|
+
data-loading=${this.loading}
|
|
31
|
+
data-show-header=${typeof this.showHeader == "boolean" ? this.showHeader : r.visible}
|
|
32
|
+
>
|
|
33
|
+
${o ? t`<h1 class="notification-title">${o}</h1>` : f}
|
|
34
|
+
<ul>
|
|
35
|
+
${this.notificationList.notifications.map(
|
|
36
|
+
({ id: s, title: h, body: b, modified: m, expandable: y }) => t`<li
|
|
37
|
+
data-expanded=${y ? this._expanded === s : !0}
|
|
38
|
+
>
|
|
39
|
+
${y ? t`
|
|
40
|
+
<button
|
|
41
|
+
title=${h}
|
|
42
|
+
aria-label=${h}
|
|
43
|
+
aria-expanded=${this._expanded === s}
|
|
44
|
+
@click=${() => {
|
|
45
|
+
this._expanded = this._expanded === s ? null : s;
|
|
46
|
+
}}
|
|
47
|
+
>
|
|
48
|
+
<span>${h}</span>
|
|
49
|
+
${this._expanded === s ? t` <ui-symbol-badge
|
|
50
|
+
size="11"
|
|
51
|
+
.symbol=${{
|
|
52
|
+
type: "Svg",
|
|
53
|
+
content: "caret-up"
|
|
54
|
+
}}
|
|
55
|
+
/>` : t` <ui-symbol-badge
|
|
56
|
+
size="11"
|
|
57
|
+
.symbol=${{
|
|
58
|
+
type: "Svg",
|
|
59
|
+
content: "caret-down"
|
|
60
|
+
}}
|
|
61
|
+
/>`}
|
|
62
|
+
</button>
|
|
63
|
+
<ui-html
|
|
64
|
+
class="notification-body"
|
|
65
|
+
.html=${b}
|
|
66
|
+
></ui-html>
|
|
67
|
+
${m ? t`<ui-timestamp
|
|
68
|
+
.timestamp=${m}
|
|
69
|
+
></ui-timestamp>` : f}
|
|
70
|
+
` : t`
|
|
71
|
+
<ui-html
|
|
72
|
+
class="notification-body"
|
|
73
|
+
.html=${b}
|
|
74
|
+
></ui-html>
|
|
75
|
+
`}
|
|
76
|
+
</li>`
|
|
77
|
+
)}
|
|
78
|
+
</ul>
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
a.styles = v(w);
|
|
84
|
+
c([
|
|
85
|
+
p({ type: Object })
|
|
86
|
+
], a.prototype, "notificationList", 2);
|
|
87
|
+
c([
|
|
88
|
+
p({ type: Boolean })
|
|
89
|
+
], a.prototype, "loading", 2);
|
|
90
|
+
c([
|
|
91
|
+
p({ type: Boolean })
|
|
92
|
+
], a.prototype, "showHeader", 2);
|
|
93
|
+
c([
|
|
94
|
+
g()
|
|
95
|
+
], a.prototype, "_expanded", 2);
|
|
96
|
+
customElements.get("ui-notification-list") || customElements.define("ui-notification-list", a);
|
|
2
97
|
export {
|
|
3
|
-
|
|
98
|
+
a as NotificationListUi
|
|
4
99
|
};
|
|
5
100
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/ui-notification-list.ts"],"sourcesContent":["import { Notification } from '@telia-ace/knowledge-widget-core';\nimport { Symbol } from '@telia-ace/widget-ui';\nimport { html, LitElement, nothing, unsafeCSS } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './ui-notification-list.scss?inline';\n\ntype INotificationList = {\n id: string;\n title?: string;\n symbol?: Symbol;\n notifications: Notification[];\n defaultHeaderOptions?: {\n visible: boolean;\n };\n};\n\n// @customElement('ui-notification-list')\nexport class NotificationList extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: Object })\n declare notificationList: INotificationList;\n\n @property({ type: Boolean })\n declare loading: boolean;\n\n @property({ type: Boolean })\n declare showHeader: boolean;\n\n @state()\n declare _expanded: string | null;\n\n constructor() {\n super();\n this._expanded = null;\n this.loading = false;\n this.showHeader = false;\n }\n\n render() {\n if (!this.notificationList || (!this.notificationList?.notifications && !this.loading)) {\n return nothing;\n }\n\n const {\n id,\n title,\n symbol,\n notifications = [],\n defaultHeaderOptions = { visible: true },\n } = this.notificationList || {};\n\n return html`\n <div\n class=\"wrapper\"\n data-notification-category=${this.id}\n data-loading=${this.loading}\n data-show-header=${typeof this.showHeader === 'boolean'\n ? this.showHeader\n : defaultHeaderOptions.visible}\n >\n ${title ? html`<h1 class=\"notification-title\">${title}</h1>` : nothing}\n <ul>\n ${this.notificationList.notifications.map(\n ({ id, title, body, modified, expandable }) => {\n return html`<li\n data-expanded=${expandable ? this._expanded === id : true}\n >\n ${expandable\n ? html`\n <button\n title=${title}\n aria-label=${title}\n aria-expanded=${this._expanded === id}\n @click=${() => {\n this._expanded =\n this._expanded === id ? null : id;\n }}\n >\n <span>${title}</span>\n ${this._expanded === id\n ? html` <ui-symbol-badge\n size=\"11\"\n .symbol=${{\n type: 'Svg',\n content: `caret-up`,\n }}\n />`\n : html` <ui-symbol-badge\n size=\"11\"\n .symbol=${{\n type: 'Svg',\n content: `caret-down`,\n }}\n />`}\n </button>\n <ui-html\n class=\"notification-body\"\n .html=${body}\n ></ui-html>\n ${modified\n ? html`<ui-timestamp\n .timestamp=${modified}\n ></ui-timestamp>`\n : nothing}\n `\n : html`\n <ui-html\n class=\"notification-body\"\n .html=${body}\n ></ui-html>\n `}\n </li>`;\n }\n )}\n </ul>\n </div>\n `;\n }\n}\n\nif (!customElements.get('ui-notification-list')) {\n customElements.define('ui-notification-list', NotificationList);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ui-notification-list': NotificationList;\n }\n}\n"],"names":["NotificationList","LitElement","_a","nothing","id","title","symbol","notifications","defaultHeaderOptions","html","body","modified","expandable","unsafeCSS","styles","__decorateClass","property","state"],"mappings":";;;;;;;;;;AAiBO,MAAMA,UAAyBC,EAAW;AAAA,EAe7C,cAAc;AACJ,aACN,KAAK,YAAY,MACjB,KAAK,UAAU,IACf,KAAK,aAAa;AAAA,EACtB;AAAA,EAEA,SAAS;;AACD,QAAA,CAAC,KAAK,oBAAqB,GAACC,IAAA,KAAK,qBAAL,QAAAA,EAAuB,kBAAiB,CAAC,KAAK;AACnE,aAAAC;AAGL,UAAA;AAAA,MACF,IAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,MACA,eAAAC,IAAgB,CAAC;AAAA,MACjB,sBAAAC,IAAuB,EAAE,SAAS,GAAK;AAAA,IAAA,IACvC,KAAK,oBAAoB;AAEtB,WAAAC;AAAA;AAAA;AAAA,6CAG8B,KAAK;AAAA,+BACnB,KAAK;AAAA,mCACD,OAAO,KAAK,cAAe,YACxC,KAAK,aACLD,EAAqB;AAAA;AAAA,kBAEzBH,IAAQI,mCAAsCJ,WAAeF;AAAA;AAAA,sBAEzD,KAAK,iBAAiB,cAAc;AAAA,MAClC,CAAC,EAAE,IAAAC,GAAI,OAAAC,GAAO,MAAAK,GAAM,UAAAC,GAAU,YAAAC,QACnBH;AAAA,gDACaG,IAAa,KAAK,cAAcR,IAAK;AAAA;AAAA,kCAEnDQ,IACIH;AAAA;AAAA,sDAEgBJ;AAAAA,2DACKA;AAAAA,8DACG,KAAK,cAAcD;AAAAA,uDAC1B,MAAM;AACX,aAAK,YACD,KAAK,cAAcA,IAAK,OAAOA;AAAAA,MAAA;AAAA;AAAA,sDAG/BC;AAAAA,gDACN,KAAK,cAAcD,IACfK;AAAA;AAAA,kEAEc;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MAAA;AAAA,0DAGjBA;AAAA;AAAA,kEAEc;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sDAMfC;AAAA;AAAA,4CAEVC,IACIF;AAAA,iEACiBE;AAAA,oEAEjBR;AAAA,0CAEVM;AAAA;AAAA;AAAA,sDAGgBC;AAAA;AAAA;AAAA;AAAA,IAI9B;AAAA;AAAA;AAAA;AAAA,EAKpB;AACJ;AAtGaV,EACF,SAASa,EAAUC,CAAM;AAGxBC,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ;AAAA,GAHjBhB,EAID,WAAA,oBAAA,CAAA;AAGAe,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS;AAAA,GANlBhB,EAOD,WAAA,WAAA,CAAA;AAGAe,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS;AAAA,GATlBhB,EAUD,WAAA,cAAA,CAAA;AAGAe,EAAA;AAAA,EADPE,EAAM;AAAA,GAZEjB,EAaD,WAAA,aAAA,CAAA;AA2FP,eAAe,IAAI,sBAAsB,KAC3B,eAAA,OAAO,wBAAwBA,CAAgB;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-ui",
|
|
3
|
-
"version": "1.0.40-experimental.
|
|
3
|
+
"version": "1.0.40-experimental.9",
|
|
4
4
|
"description": "UI components used by ACE Knowledge Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
},
|
|
22
22
|
"sideEffects": false,
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@telia-ace/knowledge-widget-core": "1.0.34-experimental.
|
|
25
|
-
"@telia-ace/widget-routing": "^1.0.22-experimental.
|
|
26
|
-
"@telia-ace/widget-ui": "^1.0.28-experimental.
|
|
27
|
-
"@telia-ace/widget-utilities": "^1.0.10-experimental.
|
|
24
|
+
"@telia-ace/knowledge-widget-core": "1.0.34-experimental.9",
|
|
25
|
+
"@telia-ace/widget-routing": "^1.0.22-experimental.19",
|
|
26
|
+
"@telia-ace/widget-ui": "^1.0.28-experimental.19",
|
|
27
|
+
"@telia-ace/widget-utilities": "^1.0.10-experimental.19",
|
|
28
28
|
"@webprovisions/platform": "^1.1.2"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|