@telia-ace/knowledge-widget-ui 1.0.9 → 1.0.12
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/{lib-esm → dist}/components/dialog-link.d.ts +0 -0
- package/{lib-esm → dist}/components/dialog-list.d.ts +0 -0
- package/{lib-esm → dist}/components/drawer-list.d.ts +0 -0
- package/{lib-esm → dist}/components/dropdown-actions.d.ts +0 -0
- package/{lib-esm → dist}/components/dropdown-list.d.ts +0 -0
- package/{lib-esm → dist}/components/favorite-button.d.ts +0 -0
- package/{lib-esm → dist}/components/feedback.d.ts +0 -0
- package/{lib-esm → dist}/components/guide-list.d.ts +0 -0
- package/{lib-esm → dist}/components/index.d.ts +0 -0
- package/{lib-esm → dist}/components/loader.d.ts +0 -0
- package/{lib-esm → dist}/components/metadata.d.ts +0 -0
- package/{lib-esm → dist}/hooks/index.d.ts +0 -0
- package/{lib-esm → dist}/hooks/use-arrow-keys.d.ts +0 -0
- package/{lib-esm → dist}/hooks/use-debounce.d.ts +0 -0
- package/{lib-esm → dist}/hooks/use-favorites.d.ts +0 -0
- package/{lib-esm → dist}/hooks/use-hover.d.ts +0 -0
- package/{lib-esm → dist}/index.d.ts +0 -0
- package/dist/index.js +1385 -0
- package/dist/index.js.map +1 -0
- package/{lib-esm → dist}/missing-type-exports.d.ts +0 -0
- package/{lib-esm → dist}/styles.d.ts +0 -0
- package/{lib-esm → dist}/utils/embedded-link-mapper.d.ts +0 -0
- package/{lib-esm → dist}/utils/guide-render-instructions.d.ts +0 -0
- package/{lib-esm → dist}/utils/index.d.ts +0 -0
- package/package.json +12 -13
- package/lib/components/dialog-link.d.ts +0 -12
- package/lib/components/dialog-link.js +0 -40
- package/lib/components/dialog-list.d.ts +0 -7
- package/lib/components/dialog-list.js +0 -72
- package/lib/components/drawer-list.d.ts +0 -5
- package/lib/components/drawer-list.js +0 -43
- package/lib/components/dropdown-actions.d.ts +0 -11
- package/lib/components/dropdown-actions.js +0 -25
- package/lib/components/dropdown-list.d.ts +0 -5
- package/lib/components/dropdown-list.js +0 -66
- package/lib/components/favorite-button.d.ts +0 -17
- package/lib/components/favorite-button.js +0 -65
- package/lib/components/feedback.d.ts +0 -11
- package/lib/components/feedback.js +0 -84
- package/lib/components/guide-list.d.ts +0 -46
- package/lib/components/guide-list.js +0 -202
- package/lib/components/index.d.ts +0 -10
- package/lib/components/index.js +0 -28
- package/lib/components/loader.d.ts +0 -9
- package/lib/components/loader.js +0 -50
- package/lib/components/metadata.d.ts +0 -17
- package/lib/components/metadata.js +0 -35
- package/lib/hooks/index.d.ts +0 -5
- package/lib/hooks/index.js +0 -14
- package/lib/hooks/use-arrow-keys.d.ts +0 -3
- package/lib/hooks/use-arrow-keys.js +0 -48
- package/lib/hooks/use-debounce.d.ts +0 -2
- package/lib/hooks/use-debounce.js +0 -41
- package/lib/hooks/use-favorites.d.ts +0 -8
- package/lib/hooks/use-favorites.js +0 -81
- package/lib/hooks/use-hover.d.ts +0 -2
- package/lib/hooks/use-hover.js +0 -29
- package/lib/index.d.ts +0 -7
- package/lib/index.js +0 -44
- package/lib/missing-type-exports.d.ts +0 -47
- package/lib/missing-type-exports.js +0 -3
- package/lib/styles.d.ts +0 -7
- package/lib/styles.js +0 -50
- package/lib/utils/embedded-link-mapper.d.ts +0 -3
- package/lib/utils/embedded-link-mapper.js +0 -62
- package/lib/utils/guide-render-instructions.d.ts +0 -9
- package/lib/utils/guide-render-instructions.js +0 -56
- package/lib/utils/index.d.ts +0 -1
- package/lib/utils/index.js +0 -8
- package/lib-esm/components/dialog-link.js +0 -35
- package/lib-esm/components/dialog-list.js +0 -44
- package/lib-esm/components/drawer-list.js +0 -38
- package/lib-esm/components/dropdown-actions.js +0 -20
- package/lib-esm/components/dropdown-list.js +0 -38
- package/lib-esm/components/favorite-button.js +0 -40
- package/lib-esm/components/feedback.js +0 -59
- package/lib-esm/components/guide-list.js +0 -173
- package/lib-esm/components/index.js +0 -10
- package/lib-esm/components/loader.js +0 -21
- package/lib-esm/components/metadata.js +0 -30
- package/lib-esm/hooks/index.js +0 -4
- package/lib-esm/hooks/use-arrow-keys.js +0 -46
- package/lib-esm/hooks/use-debounce.js +0 -39
- package/lib-esm/hooks/use-favorites.js +0 -79
- package/lib-esm/hooks/use-hover.js +0 -27
- package/lib-esm/index.js +0 -6
- package/lib-esm/missing-type-exports.js +0 -2
- package/lib-esm/styles.js +0 -24
- package/lib-esm/utils/embedded-link-mapper.js +0 -57
- package/lib-esm/utils/guide-render-instructions.js +0 -51
- package/lib-esm/utils/index.js +0 -1
|
@@ -1,65 +0,0 @@
|
|
|
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
-
if (k2 === undefined) k2 = k;
|
|
8
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
-
}
|
|
12
|
-
Object.defineProperty(o, k2, desc);
|
|
13
|
-
}) : (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
o[k2] = m[k];
|
|
16
|
-
}));
|
|
17
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
-
}) : function(o, v) {
|
|
20
|
-
o["default"] = v;
|
|
21
|
-
});
|
|
22
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
-
if (mod && mod.__esModule) return mod;
|
|
24
|
-
var result = {};
|
|
25
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
-
__setModuleDefault(result, mod);
|
|
27
|
-
return result;
|
|
28
|
-
};
|
|
29
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
31
|
-
var react_1 = __importStar(require("react"));
|
|
32
|
-
var styled_components_1 = __importStar(require("styled-components"));
|
|
33
|
-
var styles_1 = require("../styles");
|
|
34
|
-
var FavoriteButton = function (_a) {
|
|
35
|
-
var addFavoriteTooltip = _a.addFavoriteTooltip, removeFavoriteCancelLabel = _a.removeFavoriteCancelLabel, removeFavoriteConfirmLabel = _a.removeFavoriteConfirmLabel, removeFavoriteHeader = _a.removeFavoriteHeader, removeFavoriteLabel = _a.removeFavoriteLabel, removeFavoriteTooltip = _a.removeFavoriteTooltip, id = _a.id, isFavorite = _a.isFavorite, guideTitle = _a.guideTitle, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? '' : _b, _c = _a.actions, addFavorite = _c.addFavorite, removeFavorite = _c.removeFavorite;
|
|
36
|
-
var remove = (0, react_1.useCallback)(function () {
|
|
37
|
-
removeFavorite(id);
|
|
38
|
-
}, [id, removeFavorite]);
|
|
39
|
-
var add = (0, react_1.useCallback)(function () {
|
|
40
|
-
addFavorite(id);
|
|
41
|
-
}, [id, addFavorite]);
|
|
42
|
-
var tooltip = "".concat(isFavorite ? removeFavoriteTooltip : addFavoriteTooltip).concat(guideTitle ? ": \"".concat(guideTitle, "\"") : '');
|
|
43
|
-
return (react_1.default.createElement(react_1.default.Fragment, null, isFavorite ? (react_1.default.createElement(widget_ui_1.Confirm, { trigger: react_1.default.createElement(StyledButton, { className: "humany-favorite-button", title: tooltip, "aria-label": tooltip, "data-favorite": "true", "data-has-label": buttonLabel ? 'true' : 'false', "data-has-symbol": "true" },
|
|
44
|
-
react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 16, symbol: { type: 'Svg', content: 'star-empty' } }),
|
|
45
|
-
buttonLabel && react_1.default.createElement(widget_ui_1.StyledText, null, buttonLabel)), onConfirm: remove, cancelLabel: removeFavoriteCancelLabel, confirmLabel: removeFavoriteConfirmLabel, header: removeFavoriteHeader, text: removeFavoriteLabel })) : (react_1.default.createElement(StyledButton, { className: "humany-favorite-button", title: tooltip, "aria-label": tooltip, onClick: add, "data-favorite": "false", "data-has-label": buttonLabel ? 'true' : 'false', "data-has-symbol": "true" },
|
|
46
|
-
react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 16, symbol: { type: 'Svg', content: 'star-empty' } }),
|
|
47
|
-
buttonLabel && react_1.default.createElement(widget_ui_1.StyledText, null, buttonLabel)))));
|
|
48
|
-
};
|
|
49
|
-
exports.default = FavoriteButton;
|
|
50
|
-
var StyledButton = (0, styled_components_1.default)(styles_1.StyledListButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n grid-area: favorite;\n\n &:focus {\n ", ";\n }\n\n ", "\n"], ["\n grid-area: favorite;\n\n &:focus {\n ", ";\n }\n\n ", "\n"])), function (p) {
|
|
51
|
-
var _a;
|
|
52
|
-
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n svg {\n ", "\n }\n "], ["\n svg {\n ", "\n }\n "])), function (p) {
|
|
53
|
-
var _a, _b;
|
|
54
|
-
return p['data-favorite'] === 'true'
|
|
55
|
-
? "\n fill: transparent;\n\n path {\n fill: transparent;\n }\n "
|
|
56
|
-
: "\n fill: ".concat((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text, ";\n\n path {\n fill: ").concat((_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text, ";\n }\n ");
|
|
57
|
-
});
|
|
58
|
-
}, function (p) {
|
|
59
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
60
|
-
return ((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text) && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n svg {\n stroke: ", ";\n\n path {\n stroke: ", ";\n }\n\n ", "\n }\n\n &:hover {\n svg {\n ", "\n }\n }\n "], ["\n svg {\n stroke: ", ";\n\n path {\n stroke: ", ";\n }\n\n ", "\n }\n\n &:hover {\n svg {\n ", "\n }\n }\n "])), (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text, (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.text, p['data-favorite'] === 'true' &&
|
|
61
|
-
"\n fill: ".concat((_d = p.theme.colors) === null || _d === void 0 ? void 0 : _d.text, ";\n\n path {\n fill: ").concat((_e = p.theme.colors) === null || _e === void 0 ? void 0 : _e.text, ";\n }\n "), p['data-favorite'] === 'true'
|
|
62
|
-
? "\n fill: transparent;\n\n path {\n fill: transparent;\n }\n "
|
|
63
|
-
: "\n fill: ".concat((_f = p.theme.colors) === null || _f === void 0 ? void 0 : _f.text, ";\n\n path {\n fill: ").concat((_g = p.theme.colors) === null || _g === void 0 ? void 0 : _g.text, ";\n }\n "));
|
|
64
|
-
});
|
|
65
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type Props = Merge<React.ComponentProps<'div'>, {
|
|
3
|
-
onFeedback?: (feedback: 'positive' | 'negative') => void;
|
|
4
|
-
positive?: string;
|
|
5
|
-
negative?: string;
|
|
6
|
-
header?: string;
|
|
7
|
-
selected?: 'positive' | 'negative';
|
|
8
|
-
direction?: 'horizontal' | 'vertical';
|
|
9
|
-
}>;
|
|
10
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Props, "header" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "selected" | "direction" | "positive" | "negative" | "onFeedback"> & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
-
export default _default;
|
|
@@ -1,84 +0,0 @@
|
|
|
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
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
52
|
-
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
53
|
-
var widget_utilities_1 = require("@telia-ace/widget-utilities");
|
|
54
|
-
var react_1 = __importStar(require("react"));
|
|
55
|
-
var styled_components_1 = __importStar(require("styled-components"));
|
|
56
|
-
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
57
|
-
var _b = _a.onFeedback, onFeedback = _b === void 0 ? function () { } : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, className = _a.className, header = _a.header, positive = _a.positive, negative = _a.negative, selected = _a.selected, other = __rest(_a, ["onFeedback", "direction", "className", "header", "positive", "negative", "selected"]);
|
|
58
|
-
return (react_1.default.createElement(Wrapper, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-feedback'), "data-direction": direction }, (0, widget_ui_1.convertToStringAttributes)(other), { ref: ref }),
|
|
59
|
-
!!header && react_1.default.createElement(Header, null, header),
|
|
60
|
-
react_1.default.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: !!selected, "aria-pressed": selected === 'positive', "data-selected": selected === 'positive', "data-direction": direction, onClick: function () { return onFeedback('positive'); } },
|
|
61
|
-
react_1.default.createElement(widget_ui_1.Icon, { faIcon: "smile-o" }),
|
|
62
|
-
react_1.default.createElement("span", null, positive)),
|
|
63
|
-
react_1.default.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: !!selected, "aria-pressed": selected === 'negative', "data-selected": selected === 'negative', "data-direction": direction, onClick: function () { return onFeedback('negative'); } },
|
|
64
|
-
react_1.default.createElement(widget_ui_1.Icon, { faIcon: "frown-o" }),
|
|
65
|
-
react_1.default.createElement("span", null, negative))));
|
|
66
|
-
});
|
|
67
|
-
var Header = (0, styled_components_1.default)(widget_ui_1.StyledText)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-weight: normal;\n margin: 0 0 ", ";\n font-size: ", ";\n display: block;\n"], ["\n font-weight: normal;\n margin: 0 0 ", ";\n font-size: ", ";\n display: block;\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
68
|
-
var FeedbackButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-block;\n font-size: ", ";\n font-weight: 300;\n && {\n margin-right: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n\n i {\n margin: 0 ", " 0 0;\n }\n"], ["\n display: inline-block;\n font-size: ", ";\n font-weight: 300;\n && {\n margin-right: ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n\n i {\n margin: 0 ", " 0 0;\n }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
|
|
69
|
-
var _a, _b;
|
|
70
|
-
return p['data-direction'] === 'horizontal' && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 225px;\n max-width: calc(50% - ", " - ", ");\n "], ["\n width: 225px;\n max-width: calc(50% - ", " - ", ");\n "])), (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
|
|
71
|
-
}, function (p) {
|
|
72
|
-
return p['data-direction'] === 'vertical' && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-width: 190px;\n "], ["\n min-width: 190px;\n "])));
|
|
73
|
-
}, function (p) {
|
|
74
|
-
var _a;
|
|
75
|
-
return (0, widget_ui_1.invertedHoverButton)({
|
|
76
|
-
active: p['data-selected'],
|
|
77
|
-
primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
|
|
78
|
-
secondaryColor: '#FFFFFF',
|
|
79
|
-
});
|
|
80
|
-
}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
|
|
81
|
-
var Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
|
|
82
|
-
return p['data-direction'] === 'vertical' && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n > button {\n width: 100%;\n &:not(:last-child) {\n margin-bottom: ", ";\n }\n }\n "], ["\n > button {\n width: 100%;\n &:not(:last-child) {\n margin-bottom: ", ";\n }\n }\n "])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
83
|
-
});
|
|
84
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { Guide } from '@telia-ace/knowledge-widget-core';
|
|
2
|
-
import { DispatchAction, ItemRenderer } from '@telia-ace/widget-ui';
|
|
3
|
-
import { Params } from '@telia-ace/widget-utilities';
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { ItemListProps } from '../missing-type-exports';
|
|
6
|
-
import { Props as MetadataProps } from './metadata';
|
|
7
|
-
declare type Routing = {
|
|
8
|
-
guide?: string;
|
|
9
|
-
page?: string;
|
|
10
|
-
};
|
|
11
|
-
declare type ParamMappers = {
|
|
12
|
-
guide?: (guide: Guide) => Params;
|
|
13
|
-
page?: () => Params;
|
|
14
|
-
};
|
|
15
|
-
export declare type Props = Merge<ItemListProps, {
|
|
16
|
-
paramMappers?: ParamMappers;
|
|
17
|
-
routing?: Routing;
|
|
18
|
-
pageLabel?: string;
|
|
19
|
-
symbolSize?: number;
|
|
20
|
-
renderItem?: ItemRenderer;
|
|
21
|
-
pageRole?: 'link' | 'button';
|
|
22
|
-
pageCaret?: 'right' | 'down';
|
|
23
|
-
showTags?: boolean;
|
|
24
|
-
showFavoriteToggle?: boolean;
|
|
25
|
-
addFavoriteTooltip?: string;
|
|
26
|
-
removeFavoriteCancelLabel?: string;
|
|
27
|
-
removeFavoriteConfirmLabel?: string;
|
|
28
|
-
removeFavoriteHeader?: string;
|
|
29
|
-
removeFavoriteLabel?: string;
|
|
30
|
-
removeFavoriteTooltip?: string;
|
|
31
|
-
metadata?: Partial<MetadataProps>;
|
|
32
|
-
dispatch?: DispatchAction;
|
|
33
|
-
localPaging?: boolean;
|
|
34
|
-
expandable?: boolean;
|
|
35
|
-
onItemClick?: (e: React.MouseEvent, guide: Guide) => void;
|
|
36
|
-
}>;
|
|
37
|
-
export declare const AccordionListItem: React.ForwardRefExoticComponent<{
|
|
38
|
-
title: string;
|
|
39
|
-
id: string;
|
|
40
|
-
route: string;
|
|
41
|
-
symbolSize?: number | undefined;
|
|
42
|
-
collapseUri?: string | undefined;
|
|
43
|
-
children?: React.ReactNode;
|
|
44
|
-
} & React.RefAttributes<HTMLLIElement>>;
|
|
45
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Props, "symbol" | "header" | "html" | "metadata" | "text" | "key" | "renderItem" | "items" | "renderLi" | keyof import("react").HTMLAttributes<HTMLDivElement> | "htmlParseInstruction" | "customHeader" | "ulProps" | "addFavoriteTooltip" | "removeFavoriteCancelLabel" | "removeFavoriteConfirmLabel" | "removeFavoriteHeader" | "removeFavoriteLabel" | "removeFavoriteTooltip" | "paramMappers" | "routing" | "pageLabel" | "symbolSize" | "pageRole" | "pageCaret" | "showTags" | "showFavoriteToggle" | "dispatch" | "localPaging" | "expandable" | "onItemClick"> & React.RefAttributes<HTMLDivElement>>;
|
|
46
|
-
export default _default;
|
|
@@ -1,202 +0,0 @@
|
|
|
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
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
68
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
69
|
-
};
|
|
70
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
71
|
-
exports.AccordionListItem = void 0;
|
|
72
|
-
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
73
|
-
var widget_utilities_1 = require("@telia-ace/widget-utilities");
|
|
74
|
-
var react_1 = __importStar(require("react"));
|
|
75
|
-
var styled_components_1 = __importStar(require("styled-components"));
|
|
76
|
-
var hooks_1 = require("../hooks");
|
|
77
|
-
var favorite_button_1 = __importDefault(require("./favorite-button"));
|
|
78
|
-
var metadata_1 = __importDefault(require("./metadata"));
|
|
79
|
-
var Tags = function (_a) {
|
|
80
|
-
var tags = _a.tags;
|
|
81
|
-
if (!tags.filter(function (t) { return t.symbol; }).length) {
|
|
82
|
-
return null;
|
|
83
|
-
}
|
|
84
|
-
return (react_1.default.createElement(StyledTagList, { className: "humany-guide-list-tags", items: tags, renderItem: function (_a) {
|
|
85
|
-
var id = _a.id, symbol = _a.symbol, title = _a.title;
|
|
86
|
-
return symbol && (react_1.default.createElement("li", { key: id, "data-tag": id },
|
|
87
|
-
react_1.default.createElement(StyledTagIcon, { size: 18, symbol: symbol, title: title })));
|
|
88
|
-
} }));
|
|
89
|
-
};
|
|
90
|
-
exports.AccordionListItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
91
|
-
var title = _a.title, id = _a.id, route = _a.route, symbolSize = _a.symbolSize, collapseUri = _a.collapseUri, children = _a.children;
|
|
92
|
-
var params = (0, widget_ui_1.useRouteData)().params;
|
|
93
|
-
return (react_1.default.createElement(ActiveAccordionListItem, { ref: ref, "data-guide": id },
|
|
94
|
-
react_1.default.createElement(widget_ui_1.TextLink, { title: title, "aria-label": title, routeName: route, params: (0, widget_utilities_1.createParams)(__assign(__assign({}, params), { uriName: collapseUri ? collapseUri : undefined, id: undefined, guide: undefined, accordion: undefined })), text: title },
|
|
95
|
-
react_1.default.createElement(widget_ui_1.SymbolBadge, { size: symbolSize, symbol: { type: 'Svg', content: 'caret-up' } })),
|
|
96
|
-
children));
|
|
97
|
-
});
|
|
98
|
-
var ActiveAccordionListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n > a { \n grid-column: 1 / -1\n font-weight: bold;\n margin: 0 0 ", " 0;\n }\n\n > div {\n grid-column: 1 / -1\n }\n"], ["\n > a { \n grid-column: 1 / -1\n font-weight: bold;\n margin: 0 0 ", " 0;\n }\n\n > div {\n grid-column: 1 / -1\n }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
|
|
99
|
-
exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
100
|
-
var _b = _a.expandable, expandable = _b === void 0 ? false : _b, _c = _a.routing, routing = _c === void 0 ? {} : _c, _d = _a.paramMappers, paramMappers = _d === void 0 ? {} : _d, _e = _a.symbolSize, symbolSize = _e === void 0 ? 11 : _e, _f = _a.pageRole, pageRole = _f === void 0 ? 'link' : _f, _g = _a.pageCaret, pageCaret = _g === void 0 ? 'down' : _g, _h = _a.showTags, showTags = _h === void 0 ? false : _h, _j = _a.showFavoriteToggle, showFavoriteToggle = _j === void 0 ? false : _j, _k = _a.localPaging, localPaging = _k === void 0 ? false : _k, _l = _a.onItemClick, onItemClick = _l === void 0 ? function () { } : _l, _m = _a.dispatch, dispatch = _m === void 0 ? function () { } : _m, _o = _a.metadata, metadata = _o === void 0 ? {} : _o, pageLabel = _a.pageLabel, className = _a.className, children = _a.children, items = _a.items, renderItem = _a.renderItem, addFavoriteTooltip = _a.addFavoriteTooltip, removeFavoriteCancelLabel = _a.removeFavoriteCancelLabel, removeFavoriteConfirmLabel = _a.removeFavoriteConfirmLabel, removeFavoriteHeader = _a.removeFavoriteHeader, removeFavoriteLabel = _a.removeFavoriteLabel, removeFavoriteTooltip = _a.removeFavoriteTooltip, other = __rest(_a, ["expandable", "routing", "paramMappers", "symbolSize", "pageRole", "pageCaret", "showTags", "showFavoriteToggle", "localPaging", "onItemClick", "dispatch", "metadata", "pageLabel", "className", "children", "items", "renderItem", "addFavoriteTooltip", "removeFavoriteCancelLabel", "removeFavoriteConfirmLabel", "removeFavoriteHeader", "removeFavoriteLabel", "removeFavoriteTooltip"]);
|
|
101
|
-
var _p = (0, react_1.useContext)(styled_components_1.ThemeContext).accessibility.isTabbing, isTabbing = _p === void 0 ? false : _p;
|
|
102
|
-
var innerRef = (0, react_1.useRef)();
|
|
103
|
-
var prevItems = (0, widget_ui_1.usePrevious)(items);
|
|
104
|
-
var _q = routing.guide, guideRoute = _q === void 0 ? 'guide' : _q, _r = routing.page, pageRoute = _r === void 0 ? 'index' : _r;
|
|
105
|
-
var _s = paramMappers.guide, mapGuideParams = _s === void 0 ? function (_a) {
|
|
106
|
-
var id = _a.id;
|
|
107
|
-
return (0, widget_utilities_1.createParams)({ guide: id });
|
|
108
|
-
} : _s, _t = paramMappers.page, mapPageParams = _t === void 0 ? function () { return (0, widget_utilities_1.createParams)(); } : _t;
|
|
109
|
-
var _u = __read((0, hooks_1.useFavorites)(), 2), favorites = _u[0], actions = _u[1];
|
|
110
|
-
(0, react_1.useImperativeHandle)(ref, function () { return innerRef.current; });
|
|
111
|
-
var defaultRenderer = function (guide) {
|
|
112
|
-
var id = guide.id, title = guide.title, tags = guide.tags, published = guide.published, modified = guide.modified, publishedBy = guide.publishedBy, modifiedBy = guide.modifiedBy;
|
|
113
|
-
return (react_1.default.createElement("li", { key: id, "data-guide": id, "has-metadata": ((!!(metadata === null || metadata === void 0 ? void 0 : metadata.showPublished) && !!published) ||
|
|
114
|
-
(!!(metadata === null || metadata === void 0 ? void 0 : metadata.showModified) && !!modified)).toString() },
|
|
115
|
-
react_1.default.createElement(widget_ui_1.TextLink, { className: "humany-guide-link", title: title, "aria-label": title, routeName: guideRoute, onClick: function (e) { return onItemClick(e, guide); }, params: mapGuideParams(guide), text: title },
|
|
116
|
-
react_1.default.createElement(widget_ui_1.SymbolBadge, { size: symbolSize, symbol: {
|
|
117
|
-
type: 'Svg',
|
|
118
|
-
content: expandable ? 'caret-down' : 'caret-right',
|
|
119
|
-
} })),
|
|
120
|
-
showFavoriteToggle && (react_1.default.createElement(favorite_button_1.default, { guideTitle: title, addFavoriteTooltip: addFavoriteTooltip, removeFavoriteCancelLabel: removeFavoriteCancelLabel, removeFavoriteConfirmLabel: removeFavoriteConfirmLabel, removeFavoriteHeader: removeFavoriteHeader, removeFavoriteLabel: removeFavoriteLabel, removeFavoriteTooltip: removeFavoriteTooltip, isFavorite: favorites.indexOf(id) > -1, actions: actions, id: id })),
|
|
121
|
-
showTags && react_1.default.createElement(Tags, { tags: tags }),
|
|
122
|
-
react_1.default.createElement(StyledMetadata, __assign({}, metadata, { indent: expandable ? undefined : symbolSize, modified: modified, published: published, publishedBy: publishedBy, modifiedBy: modifiedBy }))));
|
|
123
|
-
};
|
|
124
|
-
var renderer = (0, react_1.useCallback)(function (guide, index, items) {
|
|
125
|
-
if (renderItem) {
|
|
126
|
-
return renderItem(guide, index, items, defaultRenderer);
|
|
127
|
-
}
|
|
128
|
-
return defaultRenderer(guide, index, items);
|
|
129
|
-
}, [renderItem, defaultRenderer]);
|
|
130
|
-
var onPageClick = (0, react_1.useCallback)(function (e) {
|
|
131
|
-
if (localPaging) {
|
|
132
|
-
e.preventDefault();
|
|
133
|
-
dispatch('page', mapPageParams());
|
|
134
|
-
}
|
|
135
|
-
}, [dispatch, localPaging]);
|
|
136
|
-
(0, react_1.useEffect)(function () {
|
|
137
|
-
if (isTabbing && prevItems && prevItems.length < items.length && innerRef.current) {
|
|
138
|
-
var elements = innerRef.current.querySelectorAll('.humany-guide-list > ul > li');
|
|
139
|
-
var listItemElem = elements[prevItems.length];
|
|
140
|
-
if (elements.length === items.length && prevItems.length) {
|
|
141
|
-
var nextListItem = elements[prevItems.length];
|
|
142
|
-
if (nextListItem) {
|
|
143
|
-
var focusNext = nextListItem.querySelector('.humany-guide-link');
|
|
144
|
-
focusNext && focusNext.focus();
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
else if (listItemElem) {
|
|
148
|
-
var observer = new MutationObserver(function (mutations, observer) {
|
|
149
|
-
mutations.forEach(function (mutation) {
|
|
150
|
-
if (mutation.addedNodes) {
|
|
151
|
-
var found = Array.from(mutation.addedNodes).find(function (node) { return node.tagName === 'A'; });
|
|
152
|
-
if (found &&
|
|
153
|
-
(0, widget_utilities_1.htmlParentContains)(innerRef.current, document.activeElement)) {
|
|
154
|
-
isTabbing && found.focus();
|
|
155
|
-
observer.disconnect();
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
});
|
|
159
|
-
});
|
|
160
|
-
observer.observe(listItemElem, {
|
|
161
|
-
attributes: false,
|
|
162
|
-
characterData: false,
|
|
163
|
-
childList: true,
|
|
164
|
-
subtree: true,
|
|
165
|
-
attributeOldValue: false,
|
|
166
|
-
characterDataOldValue: false,
|
|
167
|
-
});
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
});
|
|
171
|
-
var hasMetaData = !!Object.keys(metadata).filter(function (k) { return typeof metadata[k] !== 'undefined'; }).length;
|
|
172
|
-
return (react_1.default.createElement(StyledItemList, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-guide-list'), "data-item-count": items.length, items: items, renderItem: renderer, expandable: expandable ? 'true' : 'false', "grid-items": showTags || showFavoriteToggle || hasMetaData ? 'true' : 'false' }, (0, widget_ui_1.convertToStringAttributes)(other), { ref: innerRef }),
|
|
173
|
-
pageLabel ? (react_1.default.createElement(widget_ui_1.TextLink, { text: pageLabel, title: pageLabel, "aria-label": pageLabel, routeName: pageRoute, role: pageRole, params: mapPageParams(), onClick: onPageClick },
|
|
174
|
-
react_1.default.createElement(widget_ui_1.SymbolBadge, { size: symbolSize, symbol: { type: 'Svg', content: "caret-".concat(pageCaret) } }))) : null,
|
|
175
|
-
children));
|
|
176
|
-
});
|
|
177
|
-
var StyledItemList = (0, styled_components_1.default)(widget_ui_1.ItemList)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n padding: ", ";\n overflow: auto;\n justify-content: flex-start;\n white-space: nowrap;\n font-weight: 300;\n text-decoration: none;\n\n > div {\n ", "\n }\n\n > ul > li {\n ", "\n > a {\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n display: inline-block;\n\n svg {\n margin: 0 calc(", "*2) 0 0;\n line {\n stroke: ", ";\n }\n }\n\n ", "\n\n &:focus {\n ", ";\n }\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n\n > a {\n color: ", ";\n margin: ", " 0 0;\n align-self: flex-start;\n align-items: center;\n display: flex;\n\n span {\n text-decoration: underline;\n }\n\n svg {\n margin: 0 calc(", "*2) 0 0;\n line {\n stroke: ", ";\n }\n }\n\n &:focus {\n ", ";\n }\n }\n"], ["\n ", "\n padding: ", ";\n overflow: auto;\n justify-content: flex-start;\n white-space: nowrap;\n font-weight: 300;\n text-decoration: none;\n\n > div {\n ", "\n }\n\n > ul > li {\n ", "\n > a {\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n display: inline-block;\n\n svg {\n margin: 0 calc(", "*2) 0 0;\n line {\n stroke: ", ";\n }\n }\n\n ", "\n\n &:focus {\n ", ";\n }\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n\n > a {\n color: ", ";\n margin: ", " 0 0;\n align-self: flex-start;\n align-items: center;\n display: flex;\n\n span {\n text-decoration: underline;\n }\n\n svg {\n margin: 0 calc(", "*2) 0 0;\n line {\n stroke: ", ";\n }\n }\n\n &:focus {\n ", ";\n }\n }\n"])), widget_ui_1.itemList, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, (0, widget_ui_1.headingElement)('> h1', (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n white-space: pre-wrap;\n "], ["\n white-space: pre-wrap;\n "])))), function (p) {
|
|
178
|
-
return p['grid-items'] === 'true' && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto 1fr 1fr;\n gap: 0px 0px;\n grid-template-areas: '. favorite tags';\n align-items: center;\n\n > button {\n margin: 0 0 0 ", ";\n\n &[data-favorite='false'] {\n ", ";\n &:focus {\n opacity: 1;\n }\n }\n }\n\n > span {\n font-size: ", ";\n }\n\n &:hover {\n button[data-favorite='false'] {\n display: flex;\n justify-self: flex-start;\n }\n }\n\n &[has-metadata='true'] {\n grid-template-rows: 1fr 1fr;\n grid-template-areas:\n '. favorite tags'\n 'metadata metadata metadata';\n }\n "], ["\n display: grid;\n grid-template-columns: auto 1fr 1fr;\n gap: 0px 0px;\n grid-template-areas: '. favorite tags';\n align-items: center;\n\n > button {\n margin: 0 0 0 ", ";\n\n &[data-favorite='false'] {\n ", ";\n &:focus {\n opacity: 1;\n }\n }\n }\n\n > span {\n font-size: ", ";\n }\n\n &:hover {\n button[data-favorite='false'] {\n display: flex;\n justify-self: flex-start;\n }\n }\n\n &[has-metadata='true'] {\n grid-template-rows: 1fr 1fr;\n grid-template-areas:\n '. favorite tags'\n 'metadata metadata metadata';\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.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) ? 'opacity: 0;' : 'display: none;'; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
|
|
179
|
-
}, 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.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; }, function (p) {
|
|
180
|
-
return p.expandable === 'true' && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n align-items: center;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n svg {\n margin: 0 0 0 ", ";\n }\n "], ["\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n align-items: center;\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n svg {\n margin: 0 0 0 ", ";\n }\n "])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
|
|
181
|
-
}, function (p) {
|
|
182
|
-
var _a;
|
|
183
|
-
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 text-decoration: underline;\n "], ["\n ", "\n text-decoration: underline;\n "])), widget_ui_1.borderTabStyle);
|
|
184
|
-
}, 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.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, 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.text; }, function (p) {
|
|
185
|
-
var _a;
|
|
186
|
-
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n text-decoration: underline;\n "], ["\n ", "\n text-decoration: underline;\n "])), widget_ui_1.borderTabStyle);
|
|
187
|
-
});
|
|
188
|
-
var StyledTagList = (0, styled_components_1.default)(widget_ui_1.List)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n display: flex;\n margin: 0 0 0 auto;\n grid-area: tags;\n\n li,\n li:last-child {\n margin: 0 0 0 ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n"], ["\n ", "\n display: flex;\n margin: 0 0 0 auto;\n grid-area: tags;\n\n li,\n li:last-child {\n margin: 0 0 0 ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n"])), widget_ui_1.list, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
|
|
189
|
-
var StyledTagIcon = (0, styled_components_1.default)(widget_ui_1.SymbolBadge)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n color: ", ";\n ", "\n"], ["\n display: block;\n color: ", ";\n ", "\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) {
|
|
190
|
-
if (p.symbol.type === 'Uri') {
|
|
191
|
-
return "\n width: ".concat(p.size, "px;\n height: ").concat(p.size, "px;\n ");
|
|
192
|
-
}
|
|
193
|
-
if (p.symbol.type === 'FontAwesome') {
|
|
194
|
-
return "\n font-size: ".concat(p.size, "px;\n ");
|
|
195
|
-
}
|
|
196
|
-
});
|
|
197
|
-
var StyledMetadata = (0, styled_components_1.default)(metadata_1.default)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n grid-area: metadata;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: ", ";\n ", "\n"], ["\n grid-area: metadata;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: ", ";\n ", "\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
|
|
198
|
-
var _a;
|
|
199
|
-
return typeof p.indent === 'number' &&
|
|
200
|
-
"text-indent: calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " * 2 + ").concat(p.indent, "px);");
|
|
201
|
-
});
|
|
202
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export { default as DialogLink } from './dialog-link';
|
|
2
|
-
export { default as DialogList } from './dialog-list';
|
|
3
|
-
export { default as DrawerList } from './drawer-list';
|
|
4
|
-
export { default as DropdownActions } from './dropdown-actions';
|
|
5
|
-
export { default as DropdownList } from './dropdown-list';
|
|
6
|
-
export { default as FavoriteButton } from './favorite-button';
|
|
7
|
-
export { default as Feedback } from './feedback';
|
|
8
|
-
export { AccordionListItem, default as GuideList } from './guide-list';
|
|
9
|
-
export { default as Loader, Wrapper as LoaderWrapper } from './loader';
|
|
10
|
-
export { default as Metadata } from './metadata';
|
package/lib/components/index.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
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
|
-
exports.Metadata = exports.LoaderWrapper = exports.Loader = exports.GuideList = exports.AccordionListItem = exports.Feedback = exports.FavoriteButton = exports.DropdownList = exports.DropdownActions = exports.DrawerList = exports.DialogList = exports.DialogLink = void 0;
|
|
7
|
-
var dialog_link_1 = require("./dialog-link");
|
|
8
|
-
Object.defineProperty(exports, "DialogLink", { enumerable: true, get: function () { return __importDefault(dialog_link_1).default; } });
|
|
9
|
-
var dialog_list_1 = require("./dialog-list");
|
|
10
|
-
Object.defineProperty(exports, "DialogList", { enumerable: true, get: function () { return __importDefault(dialog_list_1).default; } });
|
|
11
|
-
var drawer_list_1 = require("./drawer-list");
|
|
12
|
-
Object.defineProperty(exports, "DrawerList", { enumerable: true, get: function () { return __importDefault(drawer_list_1).default; } });
|
|
13
|
-
var dropdown_actions_1 = require("./dropdown-actions");
|
|
14
|
-
Object.defineProperty(exports, "DropdownActions", { enumerable: true, get: function () { return __importDefault(dropdown_actions_1).default; } });
|
|
15
|
-
var dropdown_list_1 = require("./dropdown-list");
|
|
16
|
-
Object.defineProperty(exports, "DropdownList", { enumerable: true, get: function () { return __importDefault(dropdown_list_1).default; } });
|
|
17
|
-
var favorite_button_1 = require("./favorite-button");
|
|
18
|
-
Object.defineProperty(exports, "FavoriteButton", { enumerable: true, get: function () { return __importDefault(favorite_button_1).default; } });
|
|
19
|
-
var feedback_1 = require("./feedback");
|
|
20
|
-
Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return __importDefault(feedback_1).default; } });
|
|
21
|
-
var guide_list_1 = require("./guide-list");
|
|
22
|
-
Object.defineProperty(exports, "AccordionListItem", { enumerable: true, get: function () { return guide_list_1.AccordionListItem; } });
|
|
23
|
-
Object.defineProperty(exports, "GuideList", { enumerable: true, get: function () { return __importDefault(guide_list_1).default; } });
|
|
24
|
-
var loader_1 = require("./loader");
|
|
25
|
-
Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return __importDefault(loader_1).default; } });
|
|
26
|
-
Object.defineProperty(exports, "LoaderWrapper", { enumerable: true, get: function () { return loader_1.Wrapper; } });
|
|
27
|
-
var metadata_1 = require("./metadata");
|
|
28
|
-
Object.defineProperty(exports, "Metadata", { enumerable: true, get: function () { return __importDefault(metadata_1).default; } });
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
declare type Props = {
|
|
3
|
-
loading: boolean | undefined;
|
|
4
|
-
};
|
|
5
|
-
export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
-
'data-loading': boolean;
|
|
7
|
-
}, never>;
|
|
8
|
-
declare const Loader: React.SFC<Props>;
|
|
9
|
-
export default Loader;
|
package/lib/components/loader.js
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
-
if (k2 === undefined) k2 = k;
|
|
8
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
-
}
|
|
12
|
-
Object.defineProperty(o, k2, desc);
|
|
13
|
-
}) : (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
o[k2] = m[k];
|
|
16
|
-
}));
|
|
17
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
-
}) : function(o, v) {
|
|
20
|
-
o["default"] = v;
|
|
21
|
-
});
|
|
22
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
-
if (mod && mod.__esModule) return mod;
|
|
24
|
-
var result = {};
|
|
25
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
-
__setModuleDefault(result, mod);
|
|
27
|
-
return result;
|
|
28
|
-
};
|
|
29
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
30
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
31
|
-
};
|
|
32
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
|
-
exports.Wrapper = void 0;
|
|
34
|
-
var react_1 = __importDefault(require("react"));
|
|
35
|
-
var styled_components_1 = __importStar(require("styled-components"));
|
|
36
|
-
var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
|
37
|
-
var dash = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n"], ["\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n"])));
|
|
38
|
-
var SpinnerSvg = styled_components_1.default.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n animation: ", " 2s linear infinite;\n height: 100%;\n transform-origin: center center;\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n transition: 200ms ease-out opacity;\n"], ["\n animation: ", " 2s linear infinite;\n height: 100%;\n transform-origin: center center;\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n transition: 200ms ease-out opacity;\n"])), spin);
|
|
39
|
-
exports.Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n width: 100%;\n pointer-events: ", "\n display: flex;\n flex-direction: column;\n justify-content: center;\n transition: 200ms ease-out opacity;\n box-sizing: border-box;\n overflow: hidden;\n ", " {\n opacity: ", "\n }\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n width: 100%;\n pointer-events: ", "\n display: flex;\n flex-direction: column;\n justify-content: center;\n transition: 200ms ease-out opacity;\n box-sizing: border-box;\n overflow: hidden;\n ", " {\n opacity: ", "\n }\n"])), function (p) { return (p['data-loading'] ? 'all' : 'none'); }, SpinnerSvg, function (p) { return (p['data-loading'] ? '1' : '0'); });
|
|
40
|
-
var Spinner = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n margin: 0 auto;\n width: 100px;\n &:before {\n content: '';\n display: block;\n padding-top: 100%;\n }\n"], ["\n position: relative;\n margin: 0 auto;\n width: 100px;\n &:before {\n content: '';\n display: block;\n padding-top: 100%;\n }\n"])));
|
|
41
|
-
var SpinnerCircle = styled_components_1.default.circle(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n animation: ", " 1.5s ease-in-out infinite;\n stroke-linecap: round;\n stroke: ", ";\n stroke-width: 2px;\n"], ["\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n animation: ", " 1.5s ease-in-out infinite;\n stroke-linecap: round;\n stroke: ", ";\n stroke-width: 2px;\n"])), dash, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
42
|
-
var Loader = function (_a) {
|
|
43
|
-
var _b = _a.loading, loading = _b === void 0 ? false : _b;
|
|
44
|
-
return (react_1.default.createElement(exports.Wrapper, { className: "humany-loader", "data-loading": loading },
|
|
45
|
-
react_1.default.createElement(Spinner, { className: "humany-spinner" },
|
|
46
|
-
react_1.default.createElement(SpinnerSvg, { viewBox: "25 25 50 50" },
|
|
47
|
-
react_1.default.createElement(SpinnerCircle, { cx: "50", cy: "50", r: "20", fill: "none", "stroke-width": "2", "stroke-miterlimit": "10" })))));
|
|
48
|
-
};
|
|
49
|
-
exports.default = Loader;
|
|
50
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { DateFormats } from '@telia-ace/widget-ui';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export declare type Props = {
|
|
4
|
-
className?: string;
|
|
5
|
-
modified?: string;
|
|
6
|
-
published?: string;
|
|
7
|
-
modifiedBy?: string | null;
|
|
8
|
-
publishedBy?: string | null;
|
|
9
|
-
showModified?: boolean;
|
|
10
|
-
showPublished?: boolean;
|
|
11
|
-
modifiedLabel?: string;
|
|
12
|
-
publishedLabel?: string;
|
|
13
|
-
byLabel?: string;
|
|
14
|
-
format?: DateFormats;
|
|
15
|
-
};
|
|
16
|
-
declare const Metadata: React.FC<Props>;
|
|
17
|
-
export default Metadata;
|
|
@@ -1,35 +0,0 @@
|
|
|
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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
-
};
|
|
9
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
11
|
-
var widget_utilities_1 = require("@telia-ace/widget-utilities");
|
|
12
|
-
var react_1 = __importDefault(require("react"));
|
|
13
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
|
14
|
-
var Metadata = function (_a) {
|
|
15
|
-
var _b = _a.format, format = _b === void 0 ? widget_ui_1.DateFormats.YYYY_MM_DD_HH_MM : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.byLabel, byLabel = _d === void 0 ? '' : _d, _e = _a.modifiedLabel, modifiedLabel = _e === void 0 ? '' : _e, _f = _a.publishedLabel, publishedLabel = _f === void 0 ? '' : _f, _g = _a.modifiedBy, modifiedBy = _g === void 0 ? '' : _g, _h = _a.publishedBy, publishedBy = _h === void 0 ? '' : _h, _j = _a.showModified, showModified = _j === void 0 ? false : _j, _k = _a.showPublished, showPublished = _k === void 0 ? false : _k, modified = _a.modified, published = _a.published;
|
|
16
|
-
var publishedTimestamp = showPublished && published ? (react_1.default.createElement(StyledTimestamp, { format: format, timestamp: published })) : null;
|
|
17
|
-
var modifiedTimestamp = showModified && modified ? react_1.default.createElement(StyledTimestamp, { format: format, timestamp: modified }) : null;
|
|
18
|
-
if (!publishedTimestamp && !modifiedTimestamp) {
|
|
19
|
-
return null;
|
|
20
|
-
}
|
|
21
|
-
return (react_1.default.createElement(StyledText, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-metadata') },
|
|
22
|
-
publishedTimestamp && (react_1.default.createElement(StyledText, { className: "humany-published" },
|
|
23
|
-
publishedLabel,
|
|
24
|
-
publishedTimestamp,
|
|
25
|
-
byLabel && publishedBy && " ".concat(byLabel.replace('{{editor}}', publishedBy)))),
|
|
26
|
-
modifiedTimestamp && (react_1.default.createElement(StyledText, { className: "humany-modified" },
|
|
27
|
-
publishedTimestamp && ', ',
|
|
28
|
-
modifiedLabel,
|
|
29
|
-
modifiedTimestamp,
|
|
30
|
-
byLabel && modifiedBy && " ".concat(byLabel.replace('{{editor}}', modifiedBy))))));
|
|
31
|
-
};
|
|
32
|
-
exports.default = Metadata;
|
|
33
|
-
var StyledTimestamp = (0, styled_components_1.default)(widget_ui_1.Timestamp)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:not(:first-child) {\n margin-left: 4px;\n }\n &:not(:last-child) {\n margin-right: 4px;\n }\n"], ["\n &:not(:first-child) {\n margin-left: 4px;\n }\n &:not(:last-child) {\n margin-right: 4px;\n }\n"])));
|
|
34
|
-
var StyledText = (0, styled_components_1.default)(widget_ui_1.Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-style: italic;\n"], ["\n font-style: italic;\n"])));
|
|
35
|
-
var templateObject_1, templateObject_2;
|
package/lib/hooks/index.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export { default as useArrowKeys } from './use-arrow-keys';
|
|
2
|
-
export { default as useDebounce } from './use-debounce';
|
|
3
|
-
export { default as useFavorites } from './use-favorites';
|
|
4
|
-
export type { FavoriteActions } from './use-favorites';
|
|
5
|
-
export { default as useHover } from './use-hover';
|