@telia-ace/knowledge-widget-components-notification-list 1.0.1
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/LICENSE.txt +6 -0
- package/README.md +3 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +7 -0
- package/lib/notification-list-component.d.ts +9 -0
- package/lib/notification-list-component.js +120 -0
- package/lib/notification-list.d.ts +6 -0
- package/lib/notification-list.js +113 -0
- package/lib-esm/index.d.ts +2 -0
- package/lib-esm/index.js +2 -0
- package/lib-esm/notification-list-component.d.ts +9 -0
- package/lib-esm/notification-list-component.js +93 -0
- package/lib-esm/notification-list.d.ts +6 -0
- package/lib-esm/notification-list.js +88 -0
- package/package.json +43 -0
package/LICENSE.txt
ADDED
package/README.md
ADDED
package/lib/index.d.ts
ADDED
package/lib/index.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var notification_list_component_1 = __importDefault(require("./notification-list-component"));
|
|
7
|
+
exports.default = notification_list_component_1.default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { NotificationList } from '@telia-ace/knowledge-widget-core';
|
|
2
|
+
import { Container } from '@webprovisions/platform';
|
|
3
|
+
export declare type NotificationListComponentProps = {
|
|
4
|
+
category?: string;
|
|
5
|
+
showHeader?: boolean;
|
|
6
|
+
notificationList?: NotificationList;
|
|
7
|
+
};
|
|
8
|
+
export declare const NotificationListComponent: (container: Container) => Promise<void>;
|
|
9
|
+
export default NotificationListComponent;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
37
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
38
|
+
if (!m) return o;
|
|
39
|
+
var i = m.call(o), r, ar = [], e;
|
|
40
|
+
try {
|
|
41
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
42
|
+
}
|
|
43
|
+
catch (error) { e = { error: error }; }
|
|
44
|
+
finally {
|
|
45
|
+
try {
|
|
46
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
47
|
+
}
|
|
48
|
+
finally { if (e) throw e.error; }
|
|
49
|
+
}
|
|
50
|
+
return ar;
|
|
51
|
+
};
|
|
52
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
53
|
+
exports.NotificationListComponent = void 0;
|
|
54
|
+
var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
|
|
55
|
+
var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
|
|
56
|
+
var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
|
|
57
|
+
var NotificationListComponent = function (container) {
|
|
58
|
+
var events = container.get('$widget').events;
|
|
59
|
+
var _a = __read((0, knowledge_widget_core_1.createEventSubscriber)(events), 2), subscribe = _a[0], unsubscribe = _a[1];
|
|
60
|
+
return (0, knowledge_widget_ui_1.createReactComponent)(container, 'notification-list', Promise.resolve().then(function () { return __importStar(require('./notification-list')); }), function (component) {
|
|
61
|
+
var fetch = function (params) {
|
|
62
|
+
component.writeProperties(__assign(__assign({}, component.properties()), { loading: true, error: undefined, notificationList: undefined }));
|
|
63
|
+
component.actions.dispatch('fetch', { params: params });
|
|
64
|
+
};
|
|
65
|
+
component.actions.create('fetch', function (_a) {
|
|
66
|
+
var error = _a.error, notificationLists = _a.notificationLists;
|
|
67
|
+
if (error) {
|
|
68
|
+
return component.actions.dispatch('fetched', {
|
|
69
|
+
error: error,
|
|
70
|
+
loading: true,
|
|
71
|
+
notificationList: undefined,
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
var _b = component.properties(), category = _b.category, notificationList = _b.notificationList;
|
|
75
|
+
var properties = {
|
|
76
|
+
notificationList: notificationLists.find(function (n) { return n.id === category; }) || notificationList,
|
|
77
|
+
};
|
|
78
|
+
return component.actions.dispatch('fetched', __assign(__assign({}, properties), { loading: true }));
|
|
79
|
+
});
|
|
80
|
+
component.actions.create('fetched', function (input) {
|
|
81
|
+
return component.writeProperties(__assign(__assign({}, input), { loading: false }));
|
|
82
|
+
});
|
|
83
|
+
container.getAsync('router').then(function (router) {
|
|
84
|
+
var params = router.getRouteData().params;
|
|
85
|
+
fetch(params);
|
|
86
|
+
});
|
|
87
|
+
subscribe('router:changed', function (event, _a) {
|
|
88
|
+
var current = _a.current;
|
|
89
|
+
fetch(current.routeData.params);
|
|
90
|
+
});
|
|
91
|
+
})
|
|
92
|
+
.then(function () {
|
|
93
|
+
return (0, knowledge_widget_core_1.extendComponent)(container, 'notification-list', function (component) {
|
|
94
|
+
component.actions.watch('notification-list.fetch', function (input, next) {
|
|
95
|
+
return container
|
|
96
|
+
.getAsync('dataClient')
|
|
97
|
+
.then(function (dataClient) {
|
|
98
|
+
return dataClient.fetch(knowledge_widget_types_grid_1.DataType.NotificationLists, {
|
|
99
|
+
categories: [
|
|
100
|
+
input.params.guideCategory,
|
|
101
|
+
input.params.contactCategory,
|
|
102
|
+
].filter(function (c) { return !!c; }),
|
|
103
|
+
searchPhrase: input.params.phrase,
|
|
104
|
+
});
|
|
105
|
+
})
|
|
106
|
+
.then(next)
|
|
107
|
+
.catch(function (error) {
|
|
108
|
+
if (error) {
|
|
109
|
+
return next(error);
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
});
|
|
114
|
+
})
|
|
115
|
+
.then(function () {
|
|
116
|
+
unsubscribe();
|
|
117
|
+
});
|
|
118
|
+
};
|
|
119
|
+
exports.NotificationListComponent = NotificationListComponent;
|
|
120
|
+
exports.default = exports.NotificationListComponent;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
41
|
+
var t = {};
|
|
42
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
43
|
+
t[p] = s[p];
|
|
44
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
45
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
46
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
47
|
+
t[p[i]] = s[p[i]];
|
|
48
|
+
}
|
|
49
|
+
return t;
|
|
50
|
+
};
|
|
51
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
52
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
53
|
+
if (!m) return o;
|
|
54
|
+
var i = m.call(o), r, ar = [], e;
|
|
55
|
+
try {
|
|
56
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
57
|
+
}
|
|
58
|
+
catch (error) { e = { error: error }; }
|
|
59
|
+
finally {
|
|
60
|
+
try {
|
|
61
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
62
|
+
}
|
|
63
|
+
finally { if (e) throw e.error; }
|
|
64
|
+
}
|
|
65
|
+
return ar;
|
|
66
|
+
};
|
|
67
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
68
|
+
var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
|
|
69
|
+
var widget_utilities_1 = require("@telia-ace/widget-utilities");
|
|
70
|
+
var react_1 = __importStar(require("react"));
|
|
71
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
72
|
+
var NotificationList = function (_a) {
|
|
73
|
+
var className = _a.className, other = __rest(_a, ["className"]);
|
|
74
|
+
var _b = __read((0, react_1.useState)(null), 2), expanded = _b[0], setExpanded = _b[1];
|
|
75
|
+
var container = (0, knowledge_widget_ui_1.useContainer)();
|
|
76
|
+
var _c = (0, knowledge_widget_ui_1.useProperties)(), showHeader = _c.showHeader, notificationList = _c.notificationList, _d = _c.loading, loading = _d === void 0 ? false : _d;
|
|
77
|
+
var _e = notificationList || {}, id = _e.id, title = _e.title, symbol = _e.symbol, _f = _e.notifications, notifications = _f === void 0 ? [] : _f, _g = _e.defaultHeaderOptions, defaultHeaderOptions = _g === void 0 ? { visible: true } : _g;
|
|
78
|
+
if (!notifications.length && !loading) {
|
|
79
|
+
return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-list') }));
|
|
80
|
+
}
|
|
81
|
+
return (react_1.default.createElement(StyledItemList, __assign({}, other, { "data-loading": loading, "data-show-header": typeof showHeader === 'boolean' ? showHeader : defaultHeaderOptions.visible, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-list'), "data-notification-category": id, header: title, symbol: symbol, items: notifications, renderItem: function (_a) {
|
|
82
|
+
var id = _a.id, title = _a.title, body = _a.body, modified = _a.modified, expandable = _a.expandable;
|
|
83
|
+
return (react_1.default.createElement(StyledItem, { key: id, "data-notification": id, "data-expanded": expandable ? expanded === id : true }, expandable ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
84
|
+
react_1.default.createElement(StyledButton, { title: title, "aria-label": title, "aria-expanded": expanded === id, onClick: function () { return setExpanded(expanded === id ? null : id); } },
|
|
85
|
+
react_1.default.createElement("span", null, title),
|
|
86
|
+
react_1.default.createElement(StyledSymbolBadge, { size: 11, symbol: {
|
|
87
|
+
type: 'Svg',
|
|
88
|
+
content: "caret-".concat(expanded === id ? 'up' : 'down'),
|
|
89
|
+
} })),
|
|
90
|
+
react_1.default.createElement(StyledParagraph, { html: body }),
|
|
91
|
+
modified && (react_1.default.createElement(StyledTimestamp, { format: knowledge_widget_ui_1.DateFormats.YYYY_MM_DD, timestamp: modified })))) : (react_1.default.createElement(StyledParagraph, { html: body }))));
|
|
92
|
+
} }),
|
|
93
|
+
react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading })));
|
|
94
|
+
};
|
|
95
|
+
var StyledButton = (0, styled_components_1.default)(knowledge_widget_ui_1.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n text-align: left;\n svg,\n i {\n color: ", ";\n }\n span {\n color: ", ";\n font-size: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n white-space: nowrap;\n }\n &:focus {\n ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n text-align: left;\n svg,\n i {\n color: ", ";\n }\n span {\n color: ", ";\n font-size: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n white-space: nowrap;\n }\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
|
|
96
|
+
var _a, _b;
|
|
97
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n span {\n color: ", ";\n text-decoration: underline;\n }\n "], ["\n ", "\n span {\n color: ", ";\n text-decoration: underline;\n }\n "])), knowledge_widget_ui_1.borderTabStyle, (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary);
|
|
98
|
+
});
|
|
99
|
+
var StyledItemList = (0, styled_components_1.default)(knowledge_widget_ui_1.ItemList)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n overflow: hidden;\n justify-content: flex-start;\n padding: ", ";\n ", "\n\n @media (hover: hover) {\n button:hover {\n text-decoration: underline;\n }\n }\n"], ["\n ", "\n ", "\n ", "\n overflow: hidden;\n justify-content: flex-start;\n padding: ", ";\n ", "\n\n @media (hover: hover) {\n button:hover {\n text-decoration: underline;\n }\n }\n"])), knowledge_widget_ui_1.loadingOpacity, knowledge_widget_ui_1.contentBox, knowledge_widget_ui_1.itemList, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
|
|
100
|
+
return !p['data-show-header'] && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n > div {\n ", "\n }\n "], ["\n > div {\n ", "\n }\n "])), (0, knowledge_widget_ui_1.headingElement)('h1', (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: none;\n "], ["\n display: none;\n "])))));
|
|
101
|
+
});
|
|
102
|
+
var StyledParagraph = (0, styled_components_1.default)(knowledge_widget_ui_1.Paragraph)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n font-weight: 300;\n\n p {\n white-space: normal;\n }\n"], ["\n ", "\n font-weight: 300;\n\n p {\n white-space: normal;\n }\n"])), knowledge_widget_ui_1.genericHtml);
|
|
103
|
+
var StyledItem = styled_components_1.default.li(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", " {\n display: none;\n &:not(:only-child) {\n ", "\n }\n }\n\n ", "\n\n > span {\n display: block;\n font-weight: 300;\n color: ", ";\n }\n"], ["\n ", " {\n display: none;\n &:not(:only-child) {\n ", "\n }\n }\n\n ", "\n\n > span {\n display: block;\n font-weight: 300;\n color: ", ";\n }\n"])), StyledParagraph, function (p) {
|
|
104
|
+
var _a, _b, _c;
|
|
105
|
+
return ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) &&
|
|
106
|
+
((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal) && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: ", " 0;\n "], ["\n margin: ", " 0;\n "])), (_c = p.theme.sizes) === null || _c === void 0 ? void 0 : _c.normal);
|
|
107
|
+
}, function (p) {
|
|
108
|
+
return p['data-expanded'] && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", " {\n display: block;\n }\n "], ["\n ", " {\n display: block;\n }\n "])), StyledParagraph);
|
|
109
|
+
}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent; });
|
|
110
|
+
var StyledSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin: 0 0 0 ", ";\n line {\n stroke: ", ";\n }\n"], ["\n margin: 0 0 0 ", ";\n line {\n stroke: ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
111
|
+
var StyledTimestamp = (0, styled_components_1.default)(knowledge_widget_ui_1.Timestamp)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 300;\n"], ["\n font-size: ", ";\n font-weight: 300;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
|
|
112
|
+
exports.default = NotificationList;
|
|
113
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
package/lib-esm/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { NotificationList } from '@telia-ace/knowledge-widget-core';
|
|
2
|
+
import { Container } from '@webprovisions/platform';
|
|
3
|
+
export declare type NotificationListComponentProps = {
|
|
4
|
+
category?: string;
|
|
5
|
+
showHeader?: boolean;
|
|
6
|
+
notificationList?: NotificationList;
|
|
7
|
+
};
|
|
8
|
+
export declare const NotificationListComponent: (container: Container) => Promise<void>;
|
|
9
|
+
export default NotificationListComponent;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
13
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
14
|
+
if (!m) return o;
|
|
15
|
+
var i = m.call(o), r, ar = [], e;
|
|
16
|
+
try {
|
|
17
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
18
|
+
}
|
|
19
|
+
catch (error) { e = { error: error }; }
|
|
20
|
+
finally {
|
|
21
|
+
try {
|
|
22
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
23
|
+
}
|
|
24
|
+
finally { if (e) throw e.error; }
|
|
25
|
+
}
|
|
26
|
+
return ar;
|
|
27
|
+
};
|
|
28
|
+
import { createEventSubscriber, extendComponent, } from '@telia-ace/knowledge-widget-core';
|
|
29
|
+
import { DataType } from '@telia-ace/knowledge-widget-types-grid';
|
|
30
|
+
import { createReactComponent } from '@telia-ace/knowledge-widget-ui';
|
|
31
|
+
export var NotificationListComponent = function (container) {
|
|
32
|
+
var events = container.get('$widget').events;
|
|
33
|
+
var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
|
|
34
|
+
return createReactComponent(container, 'notification-list', import('./notification-list'), function (component) {
|
|
35
|
+
var fetch = function (params) {
|
|
36
|
+
component.writeProperties(__assign(__assign({}, component.properties()), { loading: true, error: undefined, notificationList: undefined }));
|
|
37
|
+
component.actions.dispatch('fetch', { params: params });
|
|
38
|
+
};
|
|
39
|
+
component.actions.create('fetch', function (_a) {
|
|
40
|
+
var error = _a.error, notificationLists = _a.notificationLists;
|
|
41
|
+
if (error) {
|
|
42
|
+
return component.actions.dispatch('fetched', {
|
|
43
|
+
error: error,
|
|
44
|
+
loading: true,
|
|
45
|
+
notificationList: undefined,
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
var _b = component.properties(), category = _b.category, notificationList = _b.notificationList;
|
|
49
|
+
var properties = {
|
|
50
|
+
notificationList: notificationLists.find(function (n) { return n.id === category; }) || notificationList,
|
|
51
|
+
};
|
|
52
|
+
return component.actions.dispatch('fetched', __assign(__assign({}, properties), { loading: true }));
|
|
53
|
+
});
|
|
54
|
+
component.actions.create('fetched', function (input) {
|
|
55
|
+
return component.writeProperties(__assign(__assign({}, input), { loading: false }));
|
|
56
|
+
});
|
|
57
|
+
container.getAsync('router').then(function (router) {
|
|
58
|
+
var params = router.getRouteData().params;
|
|
59
|
+
fetch(params);
|
|
60
|
+
});
|
|
61
|
+
subscribe('router:changed', function (event, _a) {
|
|
62
|
+
var current = _a.current;
|
|
63
|
+
fetch(current.routeData.params);
|
|
64
|
+
});
|
|
65
|
+
})
|
|
66
|
+
.then(function () {
|
|
67
|
+
return extendComponent(container, 'notification-list', function (component) {
|
|
68
|
+
component.actions.watch('notification-list.fetch', function (input, next) {
|
|
69
|
+
return container
|
|
70
|
+
.getAsync('dataClient')
|
|
71
|
+
.then(function (dataClient) {
|
|
72
|
+
return dataClient.fetch(DataType.NotificationLists, {
|
|
73
|
+
categories: [
|
|
74
|
+
input.params.guideCategory,
|
|
75
|
+
input.params.contactCategory,
|
|
76
|
+
].filter(function (c) { return !!c; }),
|
|
77
|
+
searchPhrase: input.params.phrase,
|
|
78
|
+
});
|
|
79
|
+
})
|
|
80
|
+
.then(next)
|
|
81
|
+
.catch(function (error) {
|
|
82
|
+
if (error) {
|
|
83
|
+
return next(error);
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
})
|
|
89
|
+
.then(function () {
|
|
90
|
+
unsubscribe();
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
export default NotificationListComponent;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
16
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
17
|
+
var t = {};
|
|
18
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
19
|
+
t[p] = s[p];
|
|
20
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
21
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
22
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
23
|
+
t[p[i]] = s[p[i]];
|
|
24
|
+
}
|
|
25
|
+
return t;
|
|
26
|
+
};
|
|
27
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
28
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
29
|
+
if (!m) return o;
|
|
30
|
+
var i = m.call(o), r, ar = [], e;
|
|
31
|
+
try {
|
|
32
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
33
|
+
}
|
|
34
|
+
catch (error) { e = { error: error }; }
|
|
35
|
+
finally {
|
|
36
|
+
try {
|
|
37
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
38
|
+
}
|
|
39
|
+
finally { if (e) throw e.error; }
|
|
40
|
+
}
|
|
41
|
+
return ar;
|
|
42
|
+
};
|
|
43
|
+
import { borderTabStyle, Button, contentBox, createEmptyComponent, DateFormats, genericHtml, headingElement, ItemList, itemList, Loader, loadingOpacity, Paragraph, SymbolBadge, Timestamp, useContainer, useProperties, } from '@telia-ace/knowledge-widget-ui';
|
|
44
|
+
import { appendClassNames } from '@telia-ace/widget-utilities';
|
|
45
|
+
import React, { useState } from 'react';
|
|
46
|
+
import styled, { css } from 'styled-components';
|
|
47
|
+
var NotificationList = function (_a) {
|
|
48
|
+
var className = _a.className, other = __rest(_a, ["className"]);
|
|
49
|
+
var _b = __read(useState(null), 2), expanded = _b[0], setExpanded = _b[1];
|
|
50
|
+
var container = useContainer();
|
|
51
|
+
var _c = useProperties(), showHeader = _c.showHeader, notificationList = _c.notificationList, _d = _c.loading, loading = _d === void 0 ? false : _d;
|
|
52
|
+
var _e = notificationList || {}, id = _e.id, title = _e.title, symbol = _e.symbol, _f = _e.notifications, notifications = _f === void 0 ? [] : _f, _g = _e.defaultHeaderOptions, defaultHeaderOptions = _g === void 0 ? { visible: true } : _g;
|
|
53
|
+
if (!notifications.length && !loading) {
|
|
54
|
+
return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-notification-list') }));
|
|
55
|
+
}
|
|
56
|
+
return (React.createElement(StyledItemList, __assign({}, other, { "data-loading": loading, "data-show-header": typeof showHeader === 'boolean' ? showHeader : defaultHeaderOptions.visible, className: appendClassNames(className, 'humany-notification-list'), "data-notification-category": id, header: title, symbol: symbol, items: notifications, renderItem: function (_a) {
|
|
57
|
+
var id = _a.id, title = _a.title, body = _a.body, modified = _a.modified, expandable = _a.expandable;
|
|
58
|
+
return (React.createElement(StyledItem, { key: id, "data-notification": id, "data-expanded": expandable ? expanded === id : true }, expandable ? (React.createElement(React.Fragment, null,
|
|
59
|
+
React.createElement(StyledButton, { title: title, "aria-label": title, "aria-expanded": expanded === id, onClick: function () { return setExpanded(expanded === id ? null : id); } },
|
|
60
|
+
React.createElement("span", null, title),
|
|
61
|
+
React.createElement(StyledSymbolBadge, { size: 11, symbol: {
|
|
62
|
+
type: 'Svg',
|
|
63
|
+
content: "caret-".concat(expanded === id ? 'up' : 'down'),
|
|
64
|
+
} })),
|
|
65
|
+
React.createElement(StyledParagraph, { html: body }),
|
|
66
|
+
modified && (React.createElement(StyledTimestamp, { format: DateFormats.YYYY_MM_DD, timestamp: modified })))) : (React.createElement(StyledParagraph, { html: body }))));
|
|
67
|
+
} }),
|
|
68
|
+
React.createElement(Loader, { loading: loading })));
|
|
69
|
+
};
|
|
70
|
+
var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n text-align: left;\n svg,\n i {\n color: ", ";\n }\n span {\n color: ", ";\n font-size: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n white-space: nowrap;\n }\n &:focus {\n ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n text-align: left;\n svg,\n i {\n color: ", ";\n }\n span {\n color: ", ";\n font-size: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n white-space: nowrap;\n }\n &:focus {\n ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
|
|
71
|
+
var _a, _b;
|
|
72
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n span {\n color: ", ";\n text-decoration: underline;\n }\n "], ["\n ", "\n span {\n color: ", ";\n text-decoration: underline;\n }\n "])), borderTabStyle, (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary);
|
|
73
|
+
});
|
|
74
|
+
var StyledItemList = styled(ItemList)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n overflow: hidden;\n justify-content: flex-start;\n padding: ", ";\n ", "\n\n @media (hover: hover) {\n button:hover {\n text-decoration: underline;\n }\n }\n"], ["\n ", "\n ", "\n ", "\n overflow: hidden;\n justify-content: flex-start;\n padding: ", ";\n ", "\n\n @media (hover: hover) {\n button:hover {\n text-decoration: underline;\n }\n }\n"])), loadingOpacity, contentBox, itemList, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
|
|
75
|
+
return !p['data-show-header'] && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n > div {\n ", "\n }\n "], ["\n > div {\n ", "\n }\n "])), headingElement('h1', css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: none;\n "], ["\n display: none;\n "])))));
|
|
76
|
+
});
|
|
77
|
+
var StyledParagraph = styled(Paragraph)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n font-weight: 300;\n\n p {\n white-space: normal;\n }\n"], ["\n ", "\n font-weight: 300;\n\n p {\n white-space: normal;\n }\n"])), genericHtml);
|
|
78
|
+
var StyledItem = styled.li(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", " {\n display: none;\n &:not(:only-child) {\n ", "\n }\n }\n\n ", "\n\n > span {\n display: block;\n font-weight: 300;\n color: ", ";\n }\n"], ["\n ", " {\n display: none;\n &:not(:only-child) {\n ", "\n }\n }\n\n ", "\n\n > span {\n display: block;\n font-weight: 300;\n color: ", ";\n }\n"])), StyledParagraph, function (p) {
|
|
79
|
+
var _a, _b, _c;
|
|
80
|
+
return ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) &&
|
|
81
|
+
((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal) && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: ", " 0;\n "], ["\n margin: ", " 0;\n "])), (_c = p.theme.sizes) === null || _c === void 0 ? void 0 : _c.normal);
|
|
82
|
+
}, function (p) {
|
|
83
|
+
return p['data-expanded'] && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", " {\n display: block;\n }\n "], ["\n ", " {\n display: block;\n }\n "])), StyledParagraph);
|
|
84
|
+
}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent; });
|
|
85
|
+
var StyledSymbolBadge = styled(SymbolBadge)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin: 0 0 0 ", ";\n line {\n stroke: ", ";\n }\n"], ["\n margin: 0 0 0 ", ";\n line {\n stroke: ", ";\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
86
|
+
var StyledTimestamp = styled(Timestamp)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 300;\n"], ["\n font-size: ", ";\n font-weight: 300;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
|
|
87
|
+
export default NotificationList;
|
|
88
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@telia-ace/knowledge-widget-components-notification-list",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Notification list component for ACE Knowledge Widgets.",
|
|
5
|
+
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
|
+
"author": "Telia Company AB",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"telia"
|
|
9
|
+
],
|
|
10
|
+
"main": "lib/index.js",
|
|
11
|
+
"module": "lib-esm/index.js",
|
|
12
|
+
"files": [
|
|
13
|
+
"LICENSE.txt",
|
|
14
|
+
"README.md",
|
|
15
|
+
"lib/",
|
|
16
|
+
"lib-esm/"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"clean": "cleandir lib && cleandir lib-esm",
|
|
23
|
+
"compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
|
|
24
|
+
},
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"typings": "lib/index.d.ts",
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@telia-ace/knowledge-widget-core": "^1.0.1",
|
|
29
|
+
"@telia-ace/knowledge-widget-types-grid": "^1.0.1",
|
|
30
|
+
"@telia-ace/knowledge-widget-ui": "^1.0.1",
|
|
31
|
+
"@telia-ace/widget-utilities": "^1.0.1",
|
|
32
|
+
"@webprovisions/platform": "^1.1.2",
|
|
33
|
+
"react": "^17.0.2",
|
|
34
|
+
"react-dom": "^17.0.2",
|
|
35
|
+
"styled-components": "^4.3.2"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@types/react": "^17.0.39",
|
|
39
|
+
"@types/react-dom": "^17.0.13",
|
|
40
|
+
"@types/styled-components": "^5.1.7"
|
|
41
|
+
},
|
|
42
|
+
"gitHead": "58b00b80f6a1e4a3c13f4291cb29b9422ea1aa4a"
|
|
43
|
+
}
|