@telia-ace/knowledge-widget-components-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/tag-list-component.d.ts +16 -0
- package/lib/tag-list-component.js +123 -0
- package/lib/tag-list.d.ts +6 -0
- package/lib/tag-list.js +115 -0
- package/lib-esm/index.d.ts +2 -0
- package/lib-esm/index.js +2 -0
- package/lib-esm/tag-list-component.d.ts +16 -0
- package/lib-esm/tag-list-component.js +98 -0
- package/lib-esm/tag-list.d.ts +6 -0
- package/lib-esm/tag-list.js +87 -0
- package/package.json +44 -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 tag_list_component_1 = __importDefault(require("./tag-list-component"));
|
|
7
|
+
exports.default = tag_list_component_1.default;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Tag } from '@telia-ace/knowledge-widget-core';
|
|
2
|
+
import { Container } from '@webprovisions/platform';
|
|
3
|
+
export declare type TagListComponentProps = {
|
|
4
|
+
header: string;
|
|
5
|
+
route?: string;
|
|
6
|
+
items: Tag[];
|
|
7
|
+
style?: 'badge' | 'pill';
|
|
8
|
+
showMatchCount?: boolean;
|
|
9
|
+
showIcons?: boolean;
|
|
10
|
+
static?: boolean;
|
|
11
|
+
rootTagLabel?: string;
|
|
12
|
+
fallbackOnInitialRoute?: boolean;
|
|
13
|
+
itemAriaLabel?: string;
|
|
14
|
+
};
|
|
15
|
+
declare const TagListComponent: (container: Container) => Promise<void>;
|
|
16
|
+
export default TagListComponent;
|
|
@@ -0,0 +1,123 @@
|
|
|
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 TagListComponent = function (container) {
|
|
57
|
+
return (0, knowledge_widget_ui_1.createReactComponent)(container, 'tag-list', Promise.resolve().then(function () { return __importStar(require('./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
|
+
component.actions.create('fetch', function (_a) {
|
|
61
|
+
var _b = _a.items, items = _b === void 0 ? [] : _b;
|
|
62
|
+
return component.actions.dispatch('fetched', {
|
|
63
|
+
items: items,
|
|
64
|
+
loading: true,
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
component.actions.create('fetched', function (input) {
|
|
68
|
+
return component.writeProperties(__assign(__assign({}, input), { loading: false }));
|
|
69
|
+
});
|
|
70
|
+
var fetch = function (input) {
|
|
71
|
+
if (input === void 0) { input = {}; }
|
|
72
|
+
component.writeProperties({ loading: true, error: undefined });
|
|
73
|
+
component.actions.dispatch('fetch', input);
|
|
74
|
+
};
|
|
75
|
+
container.getAsync('router').then(function (router) {
|
|
76
|
+
var params = router.getRouteData().params;
|
|
77
|
+
fetch(params);
|
|
78
|
+
});
|
|
79
|
+
subscribe('router:changed', function (event, _a) {
|
|
80
|
+
var current = _a.current;
|
|
81
|
+
fetch(current.routeData.params);
|
|
82
|
+
});
|
|
83
|
+
return function () {
|
|
84
|
+
unsubscribe();
|
|
85
|
+
};
|
|
86
|
+
}).then(function () {
|
|
87
|
+
return (0, knowledge_widget_core_1.extendComponent)(container, 'tag-list', function (component) {
|
|
88
|
+
component.actions.watch('tag-list.fetch', function (input, next) {
|
|
89
|
+
return container.getAsync('dataClient').then(function (dataClient) {
|
|
90
|
+
var _a = component.properties(), _b = _a.static, staticTags = _b === void 0 ? false : _b, _c = _a.rootTagLabel, rootTagLabel = _c === void 0 ? '' : _c;
|
|
91
|
+
var phrase = input.phrase, guideCategory = input.guideCategory, tag = input.tag;
|
|
92
|
+
return dataClient
|
|
93
|
+
.fetch(staticTags ? knowledge_widget_types_grid_1.DataType.Tags : knowledge_widget_types_grid_1.DataType.TagsOnGuides, {
|
|
94
|
+
searchPhrase: phrase,
|
|
95
|
+
categories: guideCategory,
|
|
96
|
+
tagId: tag,
|
|
97
|
+
})
|
|
98
|
+
.then(function (tags) {
|
|
99
|
+
if (tags === void 0) { tags = []; }
|
|
100
|
+
if (staticTags) {
|
|
101
|
+
var indexOfRoot = tags.findIndex(function (tag) { return tag.id === '0'; });
|
|
102
|
+
if (indexOfRoot > -1) {
|
|
103
|
+
tags.unshift(tags.splice(indexOfRoot, 1)[0]);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
return next({
|
|
107
|
+
items: tags.map(function (t) {
|
|
108
|
+
if (t.id === '0') {
|
|
109
|
+
t.title = rootTagLabel;
|
|
110
|
+
}
|
|
111
|
+
return t;
|
|
112
|
+
}),
|
|
113
|
+
});
|
|
114
|
+
})
|
|
115
|
+
.catch(function (e) {
|
|
116
|
+
return next({ items: [] });
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
exports.default = TagListComponent;
|
package/lib/tag-list.js
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
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_component_utilities_1 = require("@telia-ace/knowledge-widget-component-utilities");
|
|
56
|
+
var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
|
|
57
|
+
var widget_utilities_1 = require("@telia-ace/widget-utilities");
|
|
58
|
+
var react_1 = __importDefault(require("react"));
|
|
59
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
60
|
+
var getIcon = function (selected, defaultIcon, activeIcon) {
|
|
61
|
+
if (selected && activeIcon) {
|
|
62
|
+
return react_1.default.createElement(StyledSymbolBadge, { symbol: activeIcon, size: 18 });
|
|
63
|
+
}
|
|
64
|
+
if (defaultIcon) {
|
|
65
|
+
return react_1.default.createElement(StyledSymbolBadge, { symbol: defaultIcon, size: 18 });
|
|
66
|
+
}
|
|
67
|
+
return null;
|
|
68
|
+
};
|
|
69
|
+
var TagList = function (_a) {
|
|
70
|
+
var className = _a.className, other = __rest(_a, ["className"]);
|
|
71
|
+
var _b = (0, knowledge_widget_ui_1.useProperties)(), _c = _b.route, route = _c === void 0 ? 'search' : _c, _d = _b.items, items = _d === void 0 ? [] : _d, header = _b.header, _e = _b.loading, loading = _e === void 0 ? false : _e, _f = _b.style, style = _f === void 0 ? 'badge' : _f, _g = _b.showMatchCount, showMatchCount = _g === void 0 ? false : _g, _h = _b.showIcons, showIcons = _h === void 0 ? false : _h, _j = _b.static, staticTags = _j === void 0 ? false : _j, _k = _b.fallbackOnInitialRoute, fallbackOnInitialRoute = _k === void 0 ? false : _k, itemAriaLabel = _b.itemAriaLabel;
|
|
72
|
+
var container = (0, knowledge_widget_ui_1.useContainer)();
|
|
73
|
+
var params = (0, knowledge_widget_ui_1.useRouteData)().params;
|
|
74
|
+
if (!items.length && (!loading || staticTags)) {
|
|
75
|
+
return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-tag-list') }));
|
|
76
|
+
}
|
|
77
|
+
var Component = style === 'badge' ? StyledBadge : StyledPill;
|
|
78
|
+
return (react_1.default.createElement(StyledItemList, __assign({}, other, { "data-loading": !staticTags && loading, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-tag-list'), header: !staticTags && loading ? '' : header, items: items, type: style, renderItem: function (item) {
|
|
79
|
+
var id = item.id, title = item.title, defaultIcon = item.defaultIcon, activeIcon = item.activeIcon, matches = item.matches;
|
|
80
|
+
var selected = params.tag === item.id || (!params.tag && item.id === '0');
|
|
81
|
+
var ariaLabel = itemAriaLabel &&
|
|
82
|
+
itemAriaLabel.replace('{{title}}', title).replace('{{matches}}', "".concat(matches));
|
|
83
|
+
return (react_1.default.createElement(StyledLi, { key: id, notAllowed: (staticTags && !matches && style === 'pill').toString(), "data-tag": id },
|
|
84
|
+
react_1.default.createElement(Component, __assign({}, (0, knowledge_widget_component_utilities_1.initialRouteFallback)(item, route, fallbackOnInitialRoute, 'tag'), { role: "button", "aria-pressed": selected, "aria-label": ariaLabel, disabled: staticTags && !matches, selected: selected, text: title }),
|
|
85
|
+
showIcons && getIcon(selected, defaultIcon, activeIcon),
|
|
86
|
+
showMatchCount && (react_1.default.createElement(StyledMatchCount, null, "(".concat(matches, ")"))))));
|
|
87
|
+
} }), !staticTags && react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading })));
|
|
88
|
+
};
|
|
89
|
+
exports.default = TagList;
|
|
90
|
+
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 padding: ", ";\n ul {\n display: flex;\n flex-wrap: wrap;\n ", "\n\n li {\n margin: 0 ", " 0;\n }\n }\n"], ["\n ", "\n ", "\n ", "\n justify-content: flex-start;\n padding: ", ";\n ul {\n display: flex;\n flex-wrap: wrap;\n ", "\n\n li {\n margin: 0 ", " 0;\n }\n }\n"])), knowledge_widget_ui_1.contentBox, knowledge_widget_ui_1.itemList, knowledge_widget_ui_1.loadingOpacity, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
|
|
91
|
+
return p.type === 'pill' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n justify-content: center;\n "], ["\n justify-content: center;\n "])));
|
|
92
|
+
}, 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); });
|
|
93
|
+
var StyledBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.TextLink)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 8px 15px;\n background-color: ", ";\n border-radius: ", ";\n font-weight: 300;\n font-size: ", ";\n display: flex;\n align-items: center;\n color: #ffffff;\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 border-radius: ", ";\n font-weight: 300;\n font-size: ", ";\n display: flex;\n align-items: center;\n color: #ffffff;\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) {
|
|
94
|
+
var _a;
|
|
95
|
+
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);
|
|
96
|
+
}, 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; });
|
|
97
|
+
var StyledPill = (0, styled_components_1.default)(knowledge_widget_ui_1.TextLink)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid ", ";\n line-height: 2em;\n border-radius: 1em;\n padding: 0 0.5em;\n display: flex;\n align-items: center;\n font-weight: ", ";\n color: ", ";\n\n &:disabled {\n color: ", ";\n }\n\n &:focus {\n ", "\n }\n\n @media (hover: hover) {\n &:hover {\n border: 1px solid ", ";\n }\n }\n\n ", "\n"], ["\n border: 1px solid ", ";\n line-height: 2em;\n border-radius: 1em;\n padding: 0 0.5em;\n display: flex;\n align-items: center;\n font-weight: ", ";\n color: ", ";\n\n &:disabled {\n color: ", ";\n }\n\n &:focus {\n ", "\n }\n\n @media (hover: hover) {\n &:hover {\n border: 1px solid ", ";\n }\n }\n\n ", "\n"])), function (p) { var _a; return (p.selected ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text : 'transparent'); }, function (p) { return (p.selected ? 'normal' : 300); }, 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.colors) === null || _a === void 0 ? void 0 : _a.textLight; }, function (p) {
|
|
98
|
+
var _a;
|
|
99
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n border-radius: 1em;\n "], ["\n ", "\n border-radius: 1em;\n "])), knowledge_widget_ui_1.borderTabStyle);
|
|
100
|
+
}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
|
|
101
|
+
return p.disabled && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n opacity: 0.5;\n "], ["\n opacity: 0.5;\n "])));
|
|
102
|
+
});
|
|
103
|
+
var StyledMatchCount = (0, styled_components_1.default)(knowledge_widget_ui_1.Text)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n order: 2;\n margin-left: ", ";\n"], ["\n order: 2;\n margin-left: ", ";\n"])), function (p) { return p.theme.sizes.small; });
|
|
104
|
+
var StyledSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_9 || (templateObject_9 = __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) {
|
|
105
|
+
if (p.symbol.type === 'Uri') {
|
|
106
|
+
return "\n width: ".concat(p.size, "px;\n height: ").concat(p.size, "px;\n ");
|
|
107
|
+
}
|
|
108
|
+
if (p.symbol.type === 'FontAwesome') {
|
|
109
|
+
return "\n font-size: ".concat(p.size, "px;\n ");
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
var StyledLi = styled_components_1.default.li(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
|
|
113
|
+
return p.notAllowed === 'true' && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n cursor: not-allowed;\n "], ["\n cursor: not-allowed;\n "])));
|
|
114
|
+
});
|
|
115
|
+
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,16 @@
|
|
|
1
|
+
import { Tag } from '@telia-ace/knowledge-widget-core';
|
|
2
|
+
import { Container } from '@webprovisions/platform';
|
|
3
|
+
export declare type TagListComponentProps = {
|
|
4
|
+
header: string;
|
|
5
|
+
route?: string;
|
|
6
|
+
items: Tag[];
|
|
7
|
+
style?: 'badge' | 'pill';
|
|
8
|
+
showMatchCount?: boolean;
|
|
9
|
+
showIcons?: boolean;
|
|
10
|
+
static?: boolean;
|
|
11
|
+
rootTagLabel?: string;
|
|
12
|
+
fallbackOnInitialRoute?: boolean;
|
|
13
|
+
itemAriaLabel?: string;
|
|
14
|
+
};
|
|
15
|
+
declare const TagListComponent: (container: Container) => Promise<void>;
|
|
16
|
+
export default TagListComponent;
|
|
@@ -0,0 +1,98 @@
|
|
|
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 TagListComponent = function (container) {
|
|
32
|
+
return createReactComponent(container, 'tag-list', import('./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
|
+
component.actions.create('fetch', function (_a) {
|
|
36
|
+
var _b = _a.items, items = _b === void 0 ? [] : _b;
|
|
37
|
+
return component.actions.dispatch('fetched', {
|
|
38
|
+
items: items,
|
|
39
|
+
loading: true,
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
component.actions.create('fetched', function (input) {
|
|
43
|
+
return component.writeProperties(__assign(__assign({}, input), { loading: false }));
|
|
44
|
+
});
|
|
45
|
+
var fetch = function (input) {
|
|
46
|
+
if (input === void 0) { input = {}; }
|
|
47
|
+
component.writeProperties({ loading: true, error: undefined });
|
|
48
|
+
component.actions.dispatch('fetch', input);
|
|
49
|
+
};
|
|
50
|
+
container.getAsync('router').then(function (router) {
|
|
51
|
+
var params = router.getRouteData().params;
|
|
52
|
+
fetch(params);
|
|
53
|
+
});
|
|
54
|
+
subscribe('router:changed', function (event, _a) {
|
|
55
|
+
var current = _a.current;
|
|
56
|
+
fetch(current.routeData.params);
|
|
57
|
+
});
|
|
58
|
+
return function () {
|
|
59
|
+
unsubscribe();
|
|
60
|
+
};
|
|
61
|
+
}).then(function () {
|
|
62
|
+
return extendComponent(container, 'tag-list', function (component) {
|
|
63
|
+
component.actions.watch('tag-list.fetch', function (input, next) {
|
|
64
|
+
return container.getAsync('dataClient').then(function (dataClient) {
|
|
65
|
+
var _a = component.properties(), _b = _a.static, staticTags = _b === void 0 ? false : _b, _c = _a.rootTagLabel, rootTagLabel = _c === void 0 ? '' : _c;
|
|
66
|
+
var phrase = input.phrase, guideCategory = input.guideCategory, tag = input.tag;
|
|
67
|
+
return dataClient
|
|
68
|
+
.fetch(staticTags ? DataType.Tags : DataType.TagsOnGuides, {
|
|
69
|
+
searchPhrase: phrase,
|
|
70
|
+
categories: guideCategory,
|
|
71
|
+
tagId: tag,
|
|
72
|
+
})
|
|
73
|
+
.then(function (tags) {
|
|
74
|
+
if (tags === void 0) { tags = []; }
|
|
75
|
+
if (staticTags) {
|
|
76
|
+
var indexOfRoot = tags.findIndex(function (tag) { return tag.id === '0'; });
|
|
77
|
+
if (indexOfRoot > -1) {
|
|
78
|
+
tags.unshift(tags.splice(indexOfRoot, 1)[0]);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return next({
|
|
82
|
+
items: tags.map(function (t) {
|
|
83
|
+
if (t.id === '0') {
|
|
84
|
+
t.title = rootTagLabel;
|
|
85
|
+
}
|
|
86
|
+
return t;
|
|
87
|
+
}),
|
|
88
|
+
});
|
|
89
|
+
})
|
|
90
|
+
.catch(function (e) {
|
|
91
|
+
return next({ items: [] });
|
|
92
|
+
});
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
export default TagListComponent;
|
|
@@ -0,0 +1,87 @@
|
|
|
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 { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';
|
|
28
|
+
import { borderTabStyle, contentBox, createEmptyComponent, ItemList, itemList, Loader, loadingOpacity, SymbolBadge, Text, TextLink, useContainer, useProperties, useRouteData, } from '@telia-ace/knowledge-widget-ui';
|
|
29
|
+
import { appendClassNames } from '@telia-ace/widget-utilities';
|
|
30
|
+
import React from 'react';
|
|
31
|
+
import styled, { css } from 'styled-components';
|
|
32
|
+
var getIcon = function (selected, defaultIcon, activeIcon) {
|
|
33
|
+
if (selected && activeIcon) {
|
|
34
|
+
return React.createElement(StyledSymbolBadge, { symbol: activeIcon, size: 18 });
|
|
35
|
+
}
|
|
36
|
+
if (defaultIcon) {
|
|
37
|
+
return React.createElement(StyledSymbolBadge, { symbol: defaultIcon, size: 18 });
|
|
38
|
+
}
|
|
39
|
+
return null;
|
|
40
|
+
};
|
|
41
|
+
var TagList = function (_a) {
|
|
42
|
+
var className = _a.className, other = __rest(_a, ["className"]);
|
|
43
|
+
var _b = useProperties(), _c = _b.route, route = _c === void 0 ? 'search' : _c, _d = _b.items, items = _d === void 0 ? [] : _d, header = _b.header, _e = _b.loading, loading = _e === void 0 ? false : _e, _f = _b.style, style = _f === void 0 ? 'badge' : _f, _g = _b.showMatchCount, showMatchCount = _g === void 0 ? false : _g, _h = _b.showIcons, showIcons = _h === void 0 ? false : _h, _j = _b.static, staticTags = _j === void 0 ? false : _j, _k = _b.fallbackOnInitialRoute, fallbackOnInitialRoute = _k === void 0 ? false : _k, itemAriaLabel = _b.itemAriaLabel;
|
|
44
|
+
var container = useContainer();
|
|
45
|
+
var params = useRouteData().params;
|
|
46
|
+
if (!items.length && (!loading || staticTags)) {
|
|
47
|
+
return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-tag-list') }));
|
|
48
|
+
}
|
|
49
|
+
var Component = style === 'badge' ? StyledBadge : StyledPill;
|
|
50
|
+
return (React.createElement(StyledItemList, __assign({}, other, { "data-loading": !staticTags && loading, className: appendClassNames(className, 'humany-tag-list'), header: !staticTags && loading ? '' : header, items: items, type: style, renderItem: function (item) {
|
|
51
|
+
var id = item.id, title = item.title, defaultIcon = item.defaultIcon, activeIcon = item.activeIcon, matches = item.matches;
|
|
52
|
+
var selected = params.tag === item.id || (!params.tag && item.id === '0');
|
|
53
|
+
var ariaLabel = itemAriaLabel &&
|
|
54
|
+
itemAriaLabel.replace('{{title}}', title).replace('{{matches}}', "".concat(matches));
|
|
55
|
+
return (React.createElement(StyledLi, { key: id, notAllowed: (staticTags && !matches && style === 'pill').toString(), "data-tag": id },
|
|
56
|
+
React.createElement(Component, __assign({}, initialRouteFallback(item, route, fallbackOnInitialRoute, 'tag'), { role: "button", "aria-pressed": selected, "aria-label": ariaLabel, disabled: staticTags && !matches, selected: selected, text: title }),
|
|
57
|
+
showIcons && getIcon(selected, defaultIcon, activeIcon),
|
|
58
|
+
showMatchCount && (React.createElement(StyledMatchCount, null, "(".concat(matches, ")"))))));
|
|
59
|
+
} }), !staticTags && React.createElement(Loader, { loading: loading })));
|
|
60
|
+
};
|
|
61
|
+
export default TagList;
|
|
62
|
+
var StyledItemList = styled(ItemList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n justify-content: flex-start;\n padding: ", ";\n ul {\n display: flex;\n flex-wrap: wrap;\n ", "\n\n li {\n margin: 0 ", " 0;\n }\n }\n"], ["\n ", "\n ", "\n ", "\n justify-content: flex-start;\n padding: ", ";\n ul {\n display: flex;\n flex-wrap: wrap;\n ", "\n\n li {\n margin: 0 ", " 0;\n }\n }\n"])), contentBox, itemList, loadingOpacity, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
|
|
63
|
+
return p.type === 'pill' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n justify-content: center;\n "], ["\n justify-content: center;\n "])));
|
|
64
|
+
}, 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); });
|
|
65
|
+
var StyledBadge = styled(TextLink)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 8px 15px;\n background-color: ", ";\n border-radius: ", ";\n font-weight: 300;\n font-size: ", ";\n display: flex;\n align-items: center;\n color: #ffffff;\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 border-radius: ", ";\n font-weight: 300;\n font-size: ", ";\n display: flex;\n align-items: center;\n color: #ffffff;\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) {
|
|
66
|
+
var _a;
|
|
67
|
+
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);
|
|
68
|
+
}, 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; });
|
|
69
|
+
var StyledPill = styled(TextLink)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid ", ";\n line-height: 2em;\n border-radius: 1em;\n padding: 0 0.5em;\n display: flex;\n align-items: center;\n font-weight: ", ";\n color: ", ";\n\n &:disabled {\n color: ", ";\n }\n\n &:focus {\n ", "\n }\n\n @media (hover: hover) {\n &:hover {\n border: 1px solid ", ";\n }\n }\n\n ", "\n"], ["\n border: 1px solid ", ";\n line-height: 2em;\n border-radius: 1em;\n padding: 0 0.5em;\n display: flex;\n align-items: center;\n font-weight: ", ";\n color: ", ";\n\n &:disabled {\n color: ", ";\n }\n\n &:focus {\n ", "\n }\n\n @media (hover: hover) {\n &:hover {\n border: 1px solid ", ";\n }\n }\n\n ", "\n"])), function (p) { var _a; return (p.selected ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text : 'transparent'); }, function (p) { return (p.selected ? 'normal' : 300); }, 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.colors) === null || _a === void 0 ? void 0 : _a.textLight; }, function (p) {
|
|
70
|
+
var _a;
|
|
71
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n border-radius: 1em;\n "], ["\n ", "\n border-radius: 1em;\n "])), borderTabStyle);
|
|
72
|
+
}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
|
|
73
|
+
return p.disabled && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n opacity: 0.5;\n "], ["\n opacity: 0.5;\n "])));
|
|
74
|
+
});
|
|
75
|
+
var StyledMatchCount = styled(Text)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n order: 2;\n margin-left: ", ";\n"], ["\n order: 2;\n margin-left: ", ";\n"])), function (p) { return p.theme.sizes.small; });
|
|
76
|
+
var StyledSymbolBadge = styled(SymbolBadge)(templateObject_9 || (templateObject_9 = __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) {
|
|
77
|
+
if (p.symbol.type === 'Uri') {
|
|
78
|
+
return "\n width: ".concat(p.size, "px;\n height: ").concat(p.size, "px;\n ");
|
|
79
|
+
}
|
|
80
|
+
if (p.symbol.type === 'FontAwesome') {
|
|
81
|
+
return "\n font-size: ".concat(p.size, "px;\n ");
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
var StyledLi = styled.li(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
|
|
85
|
+
return p.notAllowed === 'true' && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n cursor: not-allowed;\n "], ["\n cursor: not-allowed;\n "])));
|
|
86
|
+
});
|
|
87
|
+
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,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@telia-ace/knowledge-widget-components-tag-list",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "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-component-utilities": "^1.0.1",
|
|
29
|
+
"@telia-ace/knowledge-widget-core": "^1.0.1",
|
|
30
|
+
"@telia-ace/knowledge-widget-types-grid": "^1.0.1",
|
|
31
|
+
"@telia-ace/knowledge-widget-ui": "^1.0.1",
|
|
32
|
+
"@telia-ace/widget-utilities": "^1.0.1",
|
|
33
|
+
"@webprovisions/platform": "^1.1.2",
|
|
34
|
+
"react": "^17.0.2",
|
|
35
|
+
"react-dom": "^17.0.2",
|
|
36
|
+
"styled-components": "^4.3.2"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@types/react": "^17.0.39",
|
|
40
|
+
"@types/react-dom": "^17.0.13",
|
|
41
|
+
"@types/styled-components": "^5.1.7"
|
|
42
|
+
},
|
|
43
|
+
"gitHead": "58b00b80f6a1e4a3c13f4291cb29b9422ea1aa4a"
|
|
44
|
+
}
|