@telia-ace/knowledge-widget-components-related-tag-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/related-tag-list-component.d.ts +9 -0
- package/lib/related-tag-list-component.js +109 -0
- package/lib/related-tag-list.d.ts +7 -0
- package/lib/related-tag-list.js +99 -0
- package/lib-esm/index.d.ts +2 -0
- package/lib-esm/index.js +2 -0
- package/lib-esm/related-tag-list-component.d.ts +9 -0
- package/lib-esm/related-tag-list-component.js +84 -0
- package/lib-esm/related-tag-list.d.ts +7 -0
- package/lib-esm/related-tag-list.js +71 -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 related_tag_list_component_1 = __importDefault(require("./related-tag-list-component"));
|
|
7
|
+
exports.default = related_tag_list_component_1.default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Container } from '@webprovisions/platform';
|
|
2
|
+
export declare type RelatedTagListComponentProps = {
|
|
3
|
+
header: string;
|
|
4
|
+
route?: string;
|
|
5
|
+
items?: any[];
|
|
6
|
+
showIcons?: boolean;
|
|
7
|
+
};
|
|
8
|
+
declare const RelatedTagListComponent: (container: Container) => Promise<void>;
|
|
9
|
+
export default RelatedTagListComponent;
|
|
@@ -0,0 +1,109 @@
|
|
|
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
|
+
var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
|
|
54
|
+
var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
|
|
55
|
+
var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
|
|
56
|
+
var RelatedTagListComponent = function (container) {
|
|
57
|
+
return (0, knowledge_widget_ui_1.createReactComponent)(container, 'related-tag-list', Promise.resolve().then(function () { return __importStar(require('./related-tag-list')); }), function (component) {
|
|
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
|
+
var fetch = function (params) {
|
|
61
|
+
component.writeProperties({ loading: true, error: undefined });
|
|
62
|
+
component.actions.dispatch('fetch', { params: params });
|
|
63
|
+
};
|
|
64
|
+
component.actions.create('fetch', function (_a) {
|
|
65
|
+
var _b = _a.items, items = _b === void 0 ? [] : _b;
|
|
66
|
+
return component.actions.dispatch('fetched', {
|
|
67
|
+
items: items,
|
|
68
|
+
loading: true,
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
component.actions.create('fetched', function (input) {
|
|
72
|
+
return component.writeProperties(__assign(__assign({}, input), { loading: false }));
|
|
73
|
+
});
|
|
74
|
+
container.getAsync('router').then(function (router) {
|
|
75
|
+
var params = router.getRouteData().params;
|
|
76
|
+
fetch(params);
|
|
77
|
+
});
|
|
78
|
+
subscribe('router:changed', function (_, _a) {
|
|
79
|
+
var current = _a.current;
|
|
80
|
+
fetch(current.routeData.params);
|
|
81
|
+
});
|
|
82
|
+
return function () {
|
|
83
|
+
unsubscribe();
|
|
84
|
+
};
|
|
85
|
+
}).then(function () {
|
|
86
|
+
return (0, knowledge_widget_core_1.extendComponent)(container, 'related-tag-list', function (component) {
|
|
87
|
+
component.actions.watch('related-tag-list.fetch', function (input, next) {
|
|
88
|
+
var _a = input.params, guide = _a.guide, connection = _a.connection;
|
|
89
|
+
if (typeof guide !== 'undefined') {
|
|
90
|
+
return container.getAsync('dataClient').then(function (dataClient) {
|
|
91
|
+
return dataClient
|
|
92
|
+
.fetch(knowledge_widget_types_grid_1.DataType.Guide, {
|
|
93
|
+
connection: connection,
|
|
94
|
+
guideId: guide,
|
|
95
|
+
})
|
|
96
|
+
.then(function (_a) {
|
|
97
|
+
var tags = _a.tags;
|
|
98
|
+
return next(__assign(__assign({}, input), { items: tags || [] }));
|
|
99
|
+
})
|
|
100
|
+
.catch(function (e) {
|
|
101
|
+
return next(input);
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
exports.default = RelatedTagListComponent;
|
|
@@ -0,0 +1,99 @@
|
|
|
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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
52
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
53
|
+
};
|
|
54
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
55
|
+
var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
|
|
56
|
+
var widget_utilities_1 = require("@telia-ace/widget-utilities");
|
|
57
|
+
var react_1 = __importDefault(require("react"));
|
|
58
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
59
|
+
var getIcon = function (selected, defaultIcon, activeIcon) {
|
|
60
|
+
if (selected && activeIcon) {
|
|
61
|
+
return react_1.default.createElement(StyledSymbolBadge, { symbol: activeIcon, size: 18 });
|
|
62
|
+
}
|
|
63
|
+
if (defaultIcon) {
|
|
64
|
+
return react_1.default.createElement(StyledSymbolBadge, { symbol: defaultIcon, size: 18 });
|
|
65
|
+
}
|
|
66
|
+
return null;
|
|
67
|
+
};
|
|
68
|
+
var RelatedTagList = function (_a) {
|
|
69
|
+
var className = _a.className, _b = _a.embedded, embedded = _b === void 0 ? false : _b, other = __rest(_a, ["className", "embedded"]);
|
|
70
|
+
var container = (0, knowledge_widget_ui_1.useContainer)();
|
|
71
|
+
var _c = (0, knowledge_widget_ui_1.useProperties)(), _d = _c.route, route = _d === void 0 ? 'search' : _d, header = _c.header, _e = _c.items, items = _e === void 0 ? [] : _e, showIcons = _c.showIcons;
|
|
72
|
+
var params = (0, knowledge_widget_ui_1.useRouteData)().params;
|
|
73
|
+
if (!items.length) {
|
|
74
|
+
return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-tag-list', 'humany-related-tag-list') }));
|
|
75
|
+
}
|
|
76
|
+
return (react_1.default.createElement(StyledItemList, __assign({ embedded: embedded ? 'true' : 'false' }, other, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-tag-list', 'humany-related-tag-list'), header: header, items: items, renderItem: function (item) {
|
|
77
|
+
var id = item.id, title = item.title, defaultIcon = item.defaultIcon, activeIcon = item.activeIcon;
|
|
78
|
+
var selected = params.tag === item.id || (!params.tag && item.id === '0');
|
|
79
|
+
return (react_1.default.createElement("li", { key: id, "data-tag": id },
|
|
80
|
+
react_1.default.createElement(StyledLink, { routeName: route, selected: selected, params: (0, widget_utilities_1.createParams)({
|
|
81
|
+
tag: id,
|
|
82
|
+
}), text: title }, showIcons && getIcon(selected, defaultIcon, activeIcon))));
|
|
83
|
+
} })));
|
|
84
|
+
};
|
|
85
|
+
exports.default = RelatedTagList;
|
|
86
|
+
var StyledSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n ", "\n"], ["\n margin-right: ", ";\n ", "\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
|
|
87
|
+
if (p.symbol.type === 'Uri') {
|
|
88
|
+
return "\n width: ".concat(p.size, "px;\n height: ").concat(p.size, "px;\n ");
|
|
89
|
+
}
|
|
90
|
+
if (p.symbol.type === 'FontAwesome') {
|
|
91
|
+
return "\n font-size: ".concat(p.size, "px;\n ");
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
var StyledItemList = (0, styled_components_1.default)(knowledge_widget_ui_1.ItemList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n justify-content: flex-start;\n\n ul {\n display: flex;\n flex-wrap: wrap;\n li {\n margin: 0 ", " 0;\n\n a {\n color: #fff;\n }\n }\n }\n"], ["\n ", "\n ", "\n ", "\n justify-content: flex-start;\n\n ul {\n display: flex;\n flex-wrap: wrap;\n li {\n margin: 0 ", " 0;\n\n a {\n color: #fff;\n }\n }\n }\n"])), knowledge_widget_ui_1.itemList, function (p) { return p.embedded === 'false' && knowledge_widget_ui_1.contentBox; }, function (p) { var _a; return "padding: ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, ";"); }, function (p) { var _a, _b; return "".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small); });
|
|
95
|
+
var StyledLink = (0, styled_components_1.default)(knowledge_widget_ui_1.TextLink)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 8px 15px;\n background-color: ", ";\n font-weight: 300;\n border-radius: ", ";\n display: block;\n font-size: ", ";\n\n &:focus {\n ", ";\n }\n\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n"], ["\n padding: 8px 15px;\n background-color: ", ";\n font-weight: 300;\n border-radius: ", ";\n display: block;\n font-size: ", ";\n\n &:focus {\n ", ";\n }\n\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n"])), function (p) { var _a, _b; return (p.selected ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary); }, function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
|
|
96
|
+
var _a;
|
|
97
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n padding: 6px 15px;\n background-color: transparent;\n "], ["\n ", "\n padding: 6px 15px;\n background-color: transparent;\n "])), knowledge_widget_ui_1.borderTabStyle);
|
|
98
|
+
}, function (p) { var _a, _b; return p.selected ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text; });
|
|
99
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/lib-esm/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Container } from '@webprovisions/platform';
|
|
2
|
+
export declare type RelatedTagListComponentProps = {
|
|
3
|
+
header: string;
|
|
4
|
+
route?: string;
|
|
5
|
+
items?: any[];
|
|
6
|
+
showIcons?: boolean;
|
|
7
|
+
};
|
|
8
|
+
declare const RelatedTagListComponent: (container: Container) => Promise<void>;
|
|
9
|
+
export default RelatedTagListComponent;
|
|
@@ -0,0 +1,84 @@
|
|
|
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
|
+
var RelatedTagListComponent = function (container) {
|
|
32
|
+
return createReactComponent(container, 'related-tag-list', import('./related-tag-list'), function (component) {
|
|
33
|
+
var events = container.get('$widget').events;
|
|
34
|
+
var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
|
|
35
|
+
var fetch = function (params) {
|
|
36
|
+
component.writeProperties({ loading: true, error: undefined });
|
|
37
|
+
component.actions.dispatch('fetch', { params: params });
|
|
38
|
+
};
|
|
39
|
+
component.actions.create('fetch', function (_a) {
|
|
40
|
+
var _b = _a.items, items = _b === void 0 ? [] : _b;
|
|
41
|
+
return component.actions.dispatch('fetched', {
|
|
42
|
+
items: items,
|
|
43
|
+
loading: true,
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
component.actions.create('fetched', function (input) {
|
|
47
|
+
return component.writeProperties(__assign(__assign({}, input), { loading: false }));
|
|
48
|
+
});
|
|
49
|
+
container.getAsync('router').then(function (router) {
|
|
50
|
+
var params = router.getRouteData().params;
|
|
51
|
+
fetch(params);
|
|
52
|
+
});
|
|
53
|
+
subscribe('router:changed', function (_, _a) {
|
|
54
|
+
var current = _a.current;
|
|
55
|
+
fetch(current.routeData.params);
|
|
56
|
+
});
|
|
57
|
+
return function () {
|
|
58
|
+
unsubscribe();
|
|
59
|
+
};
|
|
60
|
+
}).then(function () {
|
|
61
|
+
return extendComponent(container, 'related-tag-list', function (component) {
|
|
62
|
+
component.actions.watch('related-tag-list.fetch', function (input, next) {
|
|
63
|
+
var _a = input.params, guide = _a.guide, connection = _a.connection;
|
|
64
|
+
if (typeof guide !== 'undefined') {
|
|
65
|
+
return container.getAsync('dataClient').then(function (dataClient) {
|
|
66
|
+
return dataClient
|
|
67
|
+
.fetch(DataType.Guide, {
|
|
68
|
+
connection: connection,
|
|
69
|
+
guideId: guide,
|
|
70
|
+
})
|
|
71
|
+
.then(function (_a) {
|
|
72
|
+
var tags = _a.tags;
|
|
73
|
+
return next(__assign(__assign({}, input), { items: tags || [] }));
|
|
74
|
+
})
|
|
75
|
+
.catch(function (e) {
|
|
76
|
+
return next(input);
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
export default RelatedTagListComponent;
|
|
@@ -0,0 +1,71 @@
|
|
|
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
|
+
import { borderTabStyle, contentBox, createEmptyComponent, ItemList, itemList, SymbolBadge, TextLink, useContainer, useProperties, useRouteData, } from '@telia-ace/knowledge-widget-ui';
|
|
28
|
+
import { appendClassNames, createParams } from '@telia-ace/widget-utilities';
|
|
29
|
+
import React from 'react';
|
|
30
|
+
import styled, { css } from 'styled-components';
|
|
31
|
+
var getIcon = function (selected, defaultIcon, activeIcon) {
|
|
32
|
+
if (selected && activeIcon) {
|
|
33
|
+
return React.createElement(StyledSymbolBadge, { symbol: activeIcon, size: 18 });
|
|
34
|
+
}
|
|
35
|
+
if (defaultIcon) {
|
|
36
|
+
return React.createElement(StyledSymbolBadge, { symbol: defaultIcon, size: 18 });
|
|
37
|
+
}
|
|
38
|
+
return null;
|
|
39
|
+
};
|
|
40
|
+
var RelatedTagList = function (_a) {
|
|
41
|
+
var className = _a.className, _b = _a.embedded, embedded = _b === void 0 ? false : _b, other = __rest(_a, ["className", "embedded"]);
|
|
42
|
+
var container = useContainer();
|
|
43
|
+
var _c = useProperties(), _d = _c.route, route = _d === void 0 ? 'search' : _d, header = _c.header, _e = _c.items, items = _e === void 0 ? [] : _e, showIcons = _c.showIcons;
|
|
44
|
+
var params = useRouteData().params;
|
|
45
|
+
if (!items.length) {
|
|
46
|
+
return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-tag-list', 'humany-related-tag-list') }));
|
|
47
|
+
}
|
|
48
|
+
return (React.createElement(StyledItemList, __assign({ embedded: embedded ? 'true' : 'false' }, other, { className: appendClassNames(className, 'humany-tag-list', 'humany-related-tag-list'), header: header, items: items, renderItem: function (item) {
|
|
49
|
+
var id = item.id, title = item.title, defaultIcon = item.defaultIcon, activeIcon = item.activeIcon;
|
|
50
|
+
var selected = params.tag === item.id || (!params.tag && item.id === '0');
|
|
51
|
+
return (React.createElement("li", { key: id, "data-tag": id },
|
|
52
|
+
React.createElement(StyledLink, { routeName: route, selected: selected, params: createParams({
|
|
53
|
+
tag: id,
|
|
54
|
+
}), text: title }, showIcons && getIcon(selected, defaultIcon, activeIcon))));
|
|
55
|
+
} })));
|
|
56
|
+
};
|
|
57
|
+
export default RelatedTagList;
|
|
58
|
+
var StyledSymbolBadge = styled(SymbolBadge)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n ", "\n"], ["\n margin-right: ", ";\n ", "\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
|
|
59
|
+
if (p.symbol.type === 'Uri') {
|
|
60
|
+
return "\n width: ".concat(p.size, "px;\n height: ").concat(p.size, "px;\n ");
|
|
61
|
+
}
|
|
62
|
+
if (p.symbol.type === 'FontAwesome') {
|
|
63
|
+
return "\n font-size: ".concat(p.size, "px;\n ");
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
var StyledItemList = styled(ItemList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n justify-content: flex-start;\n\n ul {\n display: flex;\n flex-wrap: wrap;\n li {\n margin: 0 ", " 0;\n\n a {\n color: #fff;\n }\n }\n }\n"], ["\n ", "\n ", "\n ", "\n justify-content: flex-start;\n\n ul {\n display: flex;\n flex-wrap: wrap;\n li {\n margin: 0 ", " 0;\n\n a {\n color: #fff;\n }\n }\n }\n"])), itemList, function (p) { return p.embedded === 'false' && contentBox; }, function (p) { var _a; return "padding: ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, ";"); }, function (p) { var _a, _b; return "".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small); });
|
|
67
|
+
var StyledLink = styled(TextLink)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 8px 15px;\n background-color: ", ";\n font-weight: 300;\n border-radius: ", ";\n display: block;\n font-size: ", ";\n\n &:focus {\n ", ";\n }\n\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n"], ["\n padding: 8px 15px;\n background-color: ", ";\n font-weight: 300;\n border-radius: ", ";\n display: block;\n font-size: ", ";\n\n &:focus {\n ", ";\n }\n\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n"])), function (p) { var _a, _b; return (p.selected ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary); }, function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
|
|
68
|
+
var _a;
|
|
69
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n padding: 6px 15px;\n background-color: transparent;\n "], ["\n ", "\n padding: 6px 15px;\n background-color: transparent;\n "])), borderTabStyle);
|
|
70
|
+
}, function (p) { var _a, _b; return p.selected ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text; });
|
|
71
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@telia-ace/knowledge-widget-components-related-tag-list",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Related tag 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
|
+
}
|