@dhis2-ui/menu 9.0.0-alpha.1 → 9.0.0
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/build/cjs/menu-item/features/accepts_suffix/index.js +11 -0
- package/build/cjs/menu-item/features/accepts_suffix.feature +5 -0
- package/build/cjs/menu-item/menu-item.js +8 -2
- package/build/cjs/menu-item/menu-item.stories.e2e.js +9 -2
- package/build/cjs/menu-item/menu-item.stories.js +23 -1
- package/build/cjs/menu-item/menu-item.styles.js +2 -2
- package/build/es/menu-item/features/accepts_suffix/index.js +8 -0
- package/build/es/menu-item/features/accepts_suffix.feature +5 -0
- package/build/es/menu-item/menu-item.js +8 -2
- package/build/es/menu-item/menu-item.stories.e2e.js +4 -0
- package/build/es/menu-item/menu-item.stories.js +19 -1
- package/build/es/menu-item/menu-item.styles.js +2 -2
- package/package.json +8 -8
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _steps = require("cypress-cucumber-preprocessor/steps");
|
|
4
|
+
|
|
5
|
+
(0, _steps.Given)('a MenuItem supplied with a suffix is rendered', () => {
|
|
6
|
+
cy.visitStory('MenuItem', 'With Suffix');
|
|
7
|
+
cy.get('[data-test="dhis2-uicore-menuitem"]').should('be.visible');
|
|
8
|
+
});
|
|
9
|
+
(0, _steps.Then)('the suffix will be visible', () => {
|
|
10
|
+
cy.contains('Suffix').should('be.visible');
|
|
11
|
+
});
|
|
@@ -69,7 +69,8 @@ const MenuItem = _ref2 => {
|
|
|
69
69
|
value,
|
|
70
70
|
label,
|
|
71
71
|
showSubMenu,
|
|
72
|
-
toggleSubMenu
|
|
72
|
+
toggleSubMenu,
|
|
73
|
+
suffix
|
|
73
74
|
} = _ref2;
|
|
74
75
|
const menuItemRef = (0, _react.useRef)();
|
|
75
76
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
|
|
@@ -96,7 +97,9 @@ const MenuItem = _ref2 => {
|
|
|
96
97
|
className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "icon"
|
|
97
98
|
}, icon), /*#__PURE__*/_react.default.createElement("span", {
|
|
98
99
|
className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "label"
|
|
99
|
-
}, label),
|
|
100
|
+
}, label), suffix && /*#__PURE__*/_react.default.createElement("span", {
|
|
101
|
+
className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "suffix"
|
|
102
|
+
}, suffix), (chevron || children) && /*#__PURE__*/_react.default.createElement("span", {
|
|
100
103
|
className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "chevron"
|
|
101
104
|
}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight24, null))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
102
105
|
id: _menuItemStyles.default.__hash
|
|
@@ -139,6 +142,9 @@ MenuItem.propTypes = {
|
|
|
139
142
|
/** When true, nested menu items are shown in a Popper */
|
|
140
143
|
showSubMenu: _propTypes.default.bool,
|
|
141
144
|
|
|
145
|
+
/** A supporting element shown at the end of the menu item */
|
|
146
|
+
suffix: _propTypes.default.node,
|
|
147
|
+
|
|
142
148
|
/** For using menu item as a link */
|
|
143
149
|
target: _propTypes.default.string,
|
|
144
150
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.WithTarget = exports.WithOnClickAndValue = exports.WithLabel = exports.WithIcon = exports.WithHref = void 0;
|
|
6
|
+
exports.default = exports.WithTarget = exports.WithSuffix = exports.WithOnClickAndValue = exports.WithLabel = exports.WithIcon = exports.WithHref = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -55,4 +55,11 @@ const WithIcon = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuI
|
|
|
55
55
|
label: "Menu item"
|
|
56
56
|
});
|
|
57
57
|
|
|
58
|
-
exports.WithIcon = WithIcon;
|
|
58
|
+
exports.WithIcon = WithIcon;
|
|
59
|
+
|
|
60
|
+
const WithSuffix = () => /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
|
|
61
|
+
suffix: "Suffix",
|
|
62
|
+
label: "Menu item"
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
exports.WithSuffix = WithSuffix;
|
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.ToggleMenuItem = exports.SubMenus = exports.OnClick = exports.Link = exports.Icon = exports.Disabled = exports.Destructive = exports.Dense = exports.Default = exports.Chevron = exports.Active = void 0;
|
|
6
|
+
exports.default = exports.ToggleMenuItem = exports.SuffixAndChevron = exports.Suffix = exports.SubMenus = exports.OnClick = exports.Link = exports.Icon = exports.Disabled = exports.Destructive = exports.Dense = exports.Default = exports.Chevron = exports.Active = void 0;
|
|
7
|
+
|
|
8
|
+
var _ui = require("@dhis2/ui");
|
|
9
|
+
|
|
10
|
+
var _uiConstants = require("@dhis2/ui-constants");
|
|
7
11
|
|
|
8
12
|
var _uiIcons = require("@dhis2/ui-icons");
|
|
9
13
|
|
|
@@ -110,6 +114,24 @@ Icon.parameters = {
|
|
|
110
114
|
}
|
|
111
115
|
}
|
|
112
116
|
};
|
|
117
|
+
const Suffix = Template.bind({});
|
|
118
|
+
exports.Suffix = Suffix;
|
|
119
|
+
Suffix.args = {
|
|
120
|
+
label: 'Open in Data Visualizer',
|
|
121
|
+
icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconVisualizationColumn24, {
|
|
122
|
+
color: _uiConstants.colors.grey600
|
|
123
|
+
}),
|
|
124
|
+
suffix: /*#__PURE__*/_react.default.createElement(_uiIcons.IconLaunch16, {
|
|
125
|
+
color: _uiConstants.colors.grey600
|
|
126
|
+
})
|
|
127
|
+
};
|
|
128
|
+
const SuffixAndChevron = Template.bind({});
|
|
129
|
+
exports.SuffixAndChevron = SuffixAndChevron;
|
|
130
|
+
SuffixAndChevron.args = {
|
|
131
|
+
label: 'Security notifications',
|
|
132
|
+
chevron: true,
|
|
133
|
+
suffix: /*#__PURE__*/_react.default.createElement(_ui.Tag, null, "3")
|
|
134
|
+
};
|
|
113
135
|
|
|
114
136
|
const OnClick = args => /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, _extends({
|
|
115
137
|
onClick: (payload, event) => {
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = ["li.jsx-
|
|
11
|
-
_defaultExport.__hash = "
|
|
10
|
+
const _defaultExport = ["li.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0;cursor:pointer;list-style:none;background-color:".concat(_uiConstants.colors.white, ";color:").concat(_uiConstants.colors.grey900, ";fill:").concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.jsx-1930534478:hover{background-color:".concat(_uiConstants.colors.grey200, ";}"), "li.jsx-1930534478:active,li.active.jsx-1930534478{background-color:".concat(_uiConstants.colors.grey300, ";}"), "li.destructive.jsx-1930534478{color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red600, ";}"), "li.destructive.jsx-1930534478:hover{background-color:".concat(_uiConstants.colors.red050, ";}"), "li.destructive.jsx-1930534478:active,li.destructive.active.jsx-1930534478{background-color:".concat(_uiConstants.colors.red100, ";}"), "li.disabled.jsx-1930534478{cursor:not-allowed;color:".concat(_uiConstants.colors.grey500, ";fill:").concat(_uiConstants.colors.grey500, ";}"), "li.disabled.jsx-1930534478:hover{background-color:".concat(_uiConstants.colors.white, ";}"), "a.jsx-1930534478{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 ".concat(_uiConstants.spacers.dp16, ";min-height:40px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}"), "a.jsx-1930534478:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), "a.jsx-1930534478:focus.jsx-1930534478:not(:focus-visible){outline:none;}", "li.with-chevron.jsx-1930534478 a.jsx-1930534478{padding-right:".concat(_uiConstants.spacers.dp8, ";}"), "li.dense.jsx-1930534478 a.jsx-1930534478{padding:0 ".concat(_uiConstants.spacers.dp12, ";min-height:32px;}"), "li.with-chevron.dense.jsx-1930534478 a.jsx-1930534478{padding-right:".concat(_uiConstants.spacers.dp4, ";}"), ".label.jsx-1930534478{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(_uiConstants.spacers.dp12, " 0;}"), "li.dense.jsx-1930534478 .label.jsx-1930534478{padding:".concat(_uiConstants.spacers.dp8, " 0;}"), ".icon.jsx-1930534478{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(_uiConstants.spacers.dp12, ";width:24px;height:24px;}"), ".suffix.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:".concat(_uiConstants.spacers.dp8, ";}"), ".chevron.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:".concat(_uiConstants.spacers.dp24, ";}"), "li.dense.jsx-1930534478 .icon.jsx-1930534478{margin-right:".concat(_uiConstants.spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-1930534478 .icon.jsx-1930534478>svg{width:24px;height:24px;}", "li.dense.jsx-1930534478 .icon.jsx-1930534478>svg,li.jsx-1930534478 .chevron.jsx-1930534478>svg{width:16px;height:16px;}"];
|
|
11
|
+
_defaultExport.__hash = "1930534478";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
|
|
2
|
+
Given('a MenuItem supplied with a suffix is rendered', () => {
|
|
3
|
+
cy.visitStory('MenuItem', 'With Suffix');
|
|
4
|
+
cy.get('[data-test="dhis2-uicore-menuitem"]').should('be.visible');
|
|
5
|
+
});
|
|
6
|
+
Then('the suffix will be visible', () => {
|
|
7
|
+
cy.contains('Suffix').should('be.visible');
|
|
8
|
+
});
|
|
@@ -48,7 +48,8 @@ const MenuItem = _ref2 => {
|
|
|
48
48
|
value,
|
|
49
49
|
label,
|
|
50
50
|
showSubMenu,
|
|
51
|
-
toggleSubMenu
|
|
51
|
+
toggleSubMenu,
|
|
52
|
+
suffix
|
|
52
53
|
} = _ref2;
|
|
53
54
|
const menuItemRef = useRef();
|
|
54
55
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
|
|
@@ -75,7 +76,9 @@ const MenuItem = _ref2 => {
|
|
|
75
76
|
className: "jsx-".concat(styles.__hash) + " " + "icon"
|
|
76
77
|
}, icon), /*#__PURE__*/React.createElement("span", {
|
|
77
78
|
className: "jsx-".concat(styles.__hash) + " " + "label"
|
|
78
|
-
}, label),
|
|
79
|
+
}, label), suffix && /*#__PURE__*/React.createElement("span", {
|
|
80
|
+
className: "jsx-".concat(styles.__hash) + " " + "suffix"
|
|
81
|
+
}, suffix), (chevron || children) && /*#__PURE__*/React.createElement("span", {
|
|
79
82
|
className: "jsx-".concat(styles.__hash) + " " + "chevron"
|
|
80
83
|
}, /*#__PURE__*/React.createElement(IconChevronRight24, null))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
81
84
|
id: styles.__hash
|
|
@@ -117,6 +120,9 @@ MenuItem.propTypes = {
|
|
|
117
120
|
/** When true, nested menu items are shown in a Popper */
|
|
118
121
|
showSubMenu: PropTypes.bool,
|
|
119
122
|
|
|
123
|
+
/** A supporting element shown at the end of the menu item */
|
|
124
|
+
suffix: PropTypes.node,
|
|
125
|
+
|
|
120
126
|
/** For using menu item as a link */
|
|
121
127
|
target: PropTypes.string,
|
|
122
128
|
|
|
@@ -27,4 +27,8 @@ export const WithTarget = () => /*#__PURE__*/React.createElement(MenuItem, {
|
|
|
27
27
|
export const WithIcon = () => /*#__PURE__*/React.createElement(MenuItem, {
|
|
28
28
|
icon: /*#__PURE__*/React.createElement("div", null, "Icon"),
|
|
29
29
|
label: "Menu item"
|
|
30
|
+
});
|
|
31
|
+
export const WithSuffix = () => /*#__PURE__*/React.createElement(MenuItem, {
|
|
32
|
+
suffix: "Suffix",
|
|
33
|
+
label: "Menu item"
|
|
30
34
|
});
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { Tag } from '@dhis2/ui';
|
|
4
|
+
import { colors } from '@dhis2/ui-constants';
|
|
5
|
+
import { IconApps24, IconVisualizationColumn24, IconLaunch16 } from '@dhis2/ui-icons';
|
|
4
6
|
import React, { useState } from 'react';
|
|
5
7
|
import { Menu } from '../index.js';
|
|
6
8
|
import { MenuItem } from './menu-item.js';
|
|
@@ -84,6 +86,22 @@ Icon.parameters = {
|
|
|
84
86
|
}
|
|
85
87
|
}
|
|
86
88
|
};
|
|
89
|
+
export const Suffix = Template.bind({});
|
|
90
|
+
Suffix.args = {
|
|
91
|
+
label: 'Open in Data Visualizer',
|
|
92
|
+
icon: /*#__PURE__*/React.createElement(IconVisualizationColumn24, {
|
|
93
|
+
color: colors.grey600
|
|
94
|
+
}),
|
|
95
|
+
suffix: /*#__PURE__*/React.createElement(IconLaunch16, {
|
|
96
|
+
color: colors.grey600
|
|
97
|
+
})
|
|
98
|
+
};
|
|
99
|
+
export const SuffixAndChevron = Template.bind({});
|
|
100
|
+
SuffixAndChevron.args = {
|
|
101
|
+
label: 'Security notifications',
|
|
102
|
+
chevron: true,
|
|
103
|
+
suffix: /*#__PURE__*/React.createElement(Tag, null, "3")
|
|
104
|
+
};
|
|
87
105
|
export const OnClick = args => /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, _extends({
|
|
88
106
|
onClick: (payload, event) => {
|
|
89
107
|
console.log(payload.value, event.target);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors, spacers, theme } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = ["li.jsx-
|
|
3
|
-
_defaultExport.__hash = "
|
|
2
|
+
const _defaultExport = ["li.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0;cursor:pointer;list-style:none;background-color:".concat(colors.white, ";color:").concat(colors.grey900, ";fill:").concat(colors.grey900, ";font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.jsx-1930534478:hover{background-color:".concat(colors.grey200, ";}"), "li.jsx-1930534478:active,li.active.jsx-1930534478{background-color:".concat(colors.grey300, ";}"), "li.destructive.jsx-1930534478{color:".concat(colors.red700, ";fill:").concat(colors.red600, ";}"), "li.destructive.jsx-1930534478:hover{background-color:".concat(colors.red050, ";}"), "li.destructive.jsx-1930534478:active,li.destructive.active.jsx-1930534478{background-color:".concat(colors.red100, ";}"), "li.disabled.jsx-1930534478{cursor:not-allowed;color:".concat(colors.grey500, ";fill:").concat(colors.grey500, ";}"), "li.disabled.jsx-1930534478:hover{background-color:".concat(colors.white, ";}"), "a.jsx-1930534478{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 ".concat(spacers.dp16, ";min-height:40px;-webkit-text-decoration:none;text-decoration:none;color:inherit;}"), "a.jsx-1930534478:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "a.jsx-1930534478:focus.jsx-1930534478:not(:focus-visible){outline:none;}", "li.with-chevron.jsx-1930534478 a.jsx-1930534478{padding-right:".concat(spacers.dp8, ";}"), "li.dense.jsx-1930534478 a.jsx-1930534478{padding:0 ".concat(spacers.dp12, ";min-height:32px;}"), "li.with-chevron.dense.jsx-1930534478 a.jsx-1930534478{padding-right:".concat(spacers.dp4, ";}"), ".label.jsx-1930534478{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(spacers.dp12, " 0;}"), "li.dense.jsx-1930534478 .label.jsx-1930534478{padding:".concat(spacers.dp8, " 0;}"), ".icon.jsx-1930534478{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(spacers.dp12, ";width:24px;height:24px;}"), ".suffix.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:".concat(spacers.dp8, ";}"), ".chevron.jsx-1930534478{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:".concat(spacers.dp24, ";}"), "li.dense.jsx-1930534478 .icon.jsx-1930534478{margin-right:".concat(spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-1930534478 .icon.jsx-1930534478>svg{width:24px;height:24px;}", "li.dense.jsx-1930534478 .icon.jsx-1930534478>svg,li.jsx-1930534478 .chevron.jsx-1930534478>svg{width:16px;height:16px;}"];
|
|
3
|
+
_defaultExport.__hash = "1930534478";
|
|
4
4
|
export default _defaultExport;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/menu",
|
|
3
|
-
"version": "9.0.0
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"description": "UI Menu",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/card": "9.0.0
|
|
37
|
-
"@dhis2-ui/divider": "9.0.0
|
|
38
|
-
"@dhis2-ui/layer": "9.0.0
|
|
39
|
-
"@dhis2-ui/popper": "9.0.0
|
|
40
|
-
"@dhis2-ui/portal": "9.0.0
|
|
41
|
-
"@dhis2/ui-constants": "9.0.0
|
|
42
|
-
"@dhis2/ui-icons": "9.0.0
|
|
36
|
+
"@dhis2-ui/card": "9.0.0",
|
|
37
|
+
"@dhis2-ui/divider": "9.0.0",
|
|
38
|
+
"@dhis2-ui/layer": "9.0.0",
|
|
39
|
+
"@dhis2-ui/popper": "9.0.0",
|
|
40
|
+
"@dhis2-ui/portal": "9.0.0",
|
|
41
|
+
"@dhis2/ui-constants": "9.0.0",
|
|
42
|
+
"@dhis2/ui-icons": "9.0.0",
|
|
43
43
|
"classnames": "^2.3.1",
|
|
44
44
|
"prop-types": "^15.7.2"
|
|
45
45
|
},
|