@daoyi/nmtl-ui 1.1.42 → 1.1.43-beta.3
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/README.md +45 -45
- package/lib/components/CollapseContent.js +1 -0
- package/lib/components/ContactModal.js +1 -1
- package/lib/components/ExportButton.js +1 -1
- package/lib/components/Footer.js +1 -1
- package/lib/components/InputMethod.js +1 -1
- package/lib/components/Keywords.js +1 -1
- package/lib/components/MoreButton.js +1 -0
- package/lib/components/{createSvgIcon-1e26790e.js → createSvgIcon-8a1a5d79.js} +0 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +2 -0
- package/package.json +116 -114
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useState as o,useEffect as r}from"react";import t from"prop-types";import{s as n,c as i}from"./style-inject.es-22541f49.js";import{i as a,a as l,r as d,M as s}from"./createSvgIcon-
|
|
1
|
+
import e,{useState as o,useEffect as r}from"react";import t from"prop-types";import{s as n,c as i}from"./style-inject.es-22541f49.js";import{i as a,a as l,r as d,M as s}from"./createSvgIcon-8a1a5d79.js";import{Typography as c}from"@material-ui/core";import{u as m,c as k}from"./_commonjsHelpers-ae1b5db5.js";import"@material-ui/icons";import"./withStyles-12e04256.js";import"@material-ui/styles";import"react-dom";var _=m(k((function(o,r){Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var t=a(e),n=(0,l(d).default)(t.createElement("path",{d:"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"MoreHoriz");r.default=n})));n(".keywordList {\n display: flex;\n flex-wrap: wrap;\n margin-top: 0.8rem; }\n .keywordList__item {\n font-size: 1.125rem !important;\n border-radius: 5px;\n margin-right: 0.5rem !important;\n margin-bottom: 0.5rem !important;\n cursor: pointer; }\n .keywordList__item__hover {\n border-radius: 5px;\n padding: 0.125rem 0.625rem;\n background: transparent;\n transition: 0.3s background ease-in-out; }\n .keywordList__item__hover:hover {\n background: rgba(0, 0, 0, 0.1); }\n .keywordList__icon svg {\n font-size: 1rem;\n line-height: 1rem; }\n .keywordList__icon .keywordList__item__hover {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0.125rem 0.875rem; }\n\n@media screen and (max-width: 484px) {\n .keywordList__item {\n font-size: 0.75rem !important; } }\n");const y=({className:o,keywords:r,backgroundColor:t,textColor:n,limit:a,onMoreClick:l,onKeywordClick:d})=>Array.isArray(r)&&e.createElement("div",{className:i("keywordList",o)},(a?r.slice(0,a):r).map(((o,r)=>e.createElement(c,{color:n||"textSecondary",className:"keywordList__item",key:r.toString(),style:{backgroundColor:t},onClick:()=>d(o)},e.createElement("div",{className:"keywordList__item__hover"},o)))),a&&r.length>a&&e.createElement("div",{className:i("keywordList__item","keywordList__icon"),style:{backgroundColor:t},onClick:l},e.createElement("div",{className:"keywordList__item__hover"},e.createElement(_,null))));y.defaultProps={className:void 0,keywords:void 0,backgroundColor:void 0,textColor:void 0,limit:void 0,onMoreClick:()=>{},onKeywordClick:()=>{}},y.propTypes={className:t.string,backgroundColor:t.string,textColor:t.string,keywords:t.arrayOf(t.any),limit:t.number,onMoreClick:t.func,onKeywordClick:t.func};n(".keywordModal__content {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 5px; }\n .keywordModal__content__img {\n margin: auto;\n height: 7.75rem;\n object-fit: scale-down; }\n .keywordModal__content__detail {\n width: 100%;\n padding: 1rem 1.25rem;\n background: rgba(255, 255, 255, 0.6);\n border-radius: 5px; }\n .keywordModal__content__detail__title {\n font-weight: bold;\n font-size: 1.5rem;\n text-decoration: underline;\n cursor: pointer; }\n .keywordModal__content__detail__desc {\n margin-top: 0.8rem;\n font-size: 1rem;\n display: -webkit-box;\n overflow: hidden;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical; }\n .keywordModal__content__detail__author {\n margin-top: 0.8rem;\n font-size: 1.25rem;\n cursor: pointer; }\n .keywordModal__content__detail__author:hover {\n text-decoration: underline; }\n\n.keywordModal .MuiPaper-root {\n min-width: initial !important; }\n");const u=({visible:o,setVisible:r,cardData:t,backgroundColor:n,textColor:i,onKeywordClick:a,onAuthorClick:l})=>{const{author:d,imgUrl:c,title:m}=t||{},k=t&&t.keywords&&t.keywords.split("\n")||[];return e.createElement(s,{transparent:!0,size:"small",className:"keywordModal",visible:o,footer:null,onCancel:()=>r(!1)},e.createElement("div",{className:"keywordModal__content",style:{backgroundColor:n}},c&&e.createElement("img",{className:"keywordModal__content__img",src:c,alt:""}),e.createElement("div",{className:"keywordModal__content__detail",style:{color:i}},e.createElement("div",{title:m,className:"keywordModal__content__detail__title"},m),d&&e.createElement("div",{className:"keywordModal__content__detail__author",title:d,onClick:l},d),e.createElement(y,{keywords:k,backgroundColor:n,onKeywordClick:a}))))};u.defaultProps={visible:void 0,setVisible:()=>{},backgroundColor:void 0,textColor:void 0,cardData:void 0,onKeywordClick:()=>{},onAuthorClick:()=>{}},u.propTypes={visible:t.bool,setVisible:t.func,cardData:t.objectOf(t.any),backgroundColor:t.string,textColor:t.string,onKeywordClick:t.func,onAuthorClick:t.func};n("");const w=({className:t,keywords:n,cardData:a,limit:l,backgroundColor:d,textColor:s,onKeywordClick:c,onMoreClick:m,onAuthorClick:k})=>{const _=a&&a.keywords&&a.keywords.split("\n")||n||[];if(0===_.filter((e=>e&&e.length>0)).length)return null;const[w,p]=o(),C=(()=>{const[e,t]=o("PC"),n=()=>{window.innerWidth>768?t("PC"):window.innerWidth>576?t("tablet"):t("mobile")};return r((()=>(n(),window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)})),[]),e})();return e.createElement("div",{className:i("keywords",t)},e.createElement(y,{limit:l||("mobile"===C?1:void 0),keywords:_,backgroundColor:d,textColor:s,onMoreClick:()=>a?p(!0):m(),onKeywordClick:c}),e.createElement(u,{visible:w,setVisible:p,cardData:a,backgroundColor:d,textColor:s,onKeywordClick:c,onAuthorClick:k}))};w.defaultProps={className:void 0,keywords:void 0,cardData:void 0,limit:void 0,backgroundColor:void 0,textColor:void 0,onKeywordClick:()=>{},onMoreClick:()=>{},onAuthorClick:()=>{}},w.propTypes={className:t.string,keywords:t.arrayOf(t.any),cardData:t.objectOf(t.any),limit:t.number,backgroundColor:t.string,textColor:t.string,onKeywordClick:t.func,onMoreClick:t.func,onAuthorClick:t.func};export{w as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import o from"react";import n from"prop-types";import{s as e,c as t}from"./style-inject.es-22541f49.js";import{ExpandLess as r,ExpandMore as a,ArrowRight as s}from"@material-ui/icons";import"./_commonjsHelpers-ae1b5db5.js";e(".moreButton {\n width: -moz-fit-content;\n width: fit-content;\n display: flex;\n align-items: center;\n position: relative;\n margin: 1rem 0rem;\n border-radius: 8px;\n padding: 1rem 2.5rem;\n -webkit-user-select: none;\n user-select: none;\n cursor: pointer; }\n .moreButton__mask {\n transition: all 0.3s ease-in-out;\n position: absolute;\n left: 0;\n top: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n opacity: 0; }\n .moreButton:hover .moreButton__mask {\n opacity: 1; }\n .moreButton--shadow {\n transition: all 0.3s ease-in-out;\n border: 3px solid #ffffff;\n position: relative;\n left: 0px;\n top: 0px; }\n .moreButton--shadow:hover {\n box-shadow: initial !important;\n left: 3px;\n top: 3px; }\n .moreButton--small {\n border: 0;\n padding: 0;\n left: 0px !important;\n top: 0px !important;\n background: transparent !important;\n box-shadow: initial !important; }\n .moreButton--small .moreButton__mask {\n opacity: 0 !important; }\n .moreButton__icon {\n display: flex;\n z-index: 1; }\n .moreButton__icon--small {\n font-size: 1.5rem;\n border-radius: 45px;\n color: #fff; }\n .moreButton__text {\n z-index: 1;\n font-size: 1.5rem;\n line-height: 1.5rem;\n transition: color 0.3s ease-in-out;\n margin-left: 0.5rem; }\n .moreButton__text--small {\n margin-left: 0.75rem;\n font-size: 1.5rem;\n color: #0c2a4d; }\n .moreButton__text--small:hover {\n text-decoration: underline; }\n");const m=n=>{const{primaryColor:e,secondaryColor:m,shadowColor:l}=n,{small:i,enableShadow:c,customExpandIcon:d}=n,{expand:p,setExpand:u,onClick:f,formatMessage:x}=n,_=p?o.createElement(r,{className:"moreButton__icon--small",style:{background:l||e}}):o.createElement(a,{className:"moreButton__icon--small",style:{background:l||e}}),h=i?p?"common.show.less":"common.show.more":"common.watch.more",b=d?o.createElement("img",{src:d,alt:"more"}):o.createElement(s,null);return o.createElement("div",{className:t("moreButton",{"moreButton--shadow":c},{"moreButton--small":i}),style:{color:l||"white",background:e,boxShadow:c?`3px 3px 0 0 ${l}`:void 0},onClick:()=>{u(!p),f()}},!c&&o.createElement("div",{className:"moreButton__mask",style:{background:m}}),o.createElement("div",{className:"moreButton__icon"},i?_:b),o.createElement("div",{className:t("moreButton__text",{"moreButton__text--small":i}),style:{color:i?l||e:void 0}},x?x({id:h}):h))};m.defaultProps={primaryColor:"#271702",secondaryColor:"#aa8859",shadowColor:void 0,small:!1,enableShadow:!1,expand:!1,customExpandIcon:void 0,formatMessage:void 0,setExpand:()=>{},onClick:()=>{}},m.propTypes={primaryColor:n.string,secondaryColor:n.string,shadowColor:n.string,small:n.bool,enableShadow:n.bool,customExpandIcon:n.node,expand:n.bool,formatMessage:n.func,setExpand:n.func,onClick:n.func};export{m as default};
|
|
File without changes
|
package/lib/index.d.ts
CHANGED
|
@@ -26,6 +26,8 @@ export { default as MUITheme } from './components/MUITheme';
|
|
|
26
26
|
export { default as Header } from './components/Header';
|
|
27
27
|
export { default as Footer } from './components/Footer';
|
|
28
28
|
export { default as Keywords } from './components/Keywords';
|
|
29
|
+
export { default as CollapseContent } from './components/CollapseContent';
|
|
30
|
+
export { default as MoreButton } from './components/MoreButton';
|
|
29
31
|
export { default as isDevelopMode } from './utils/isDevelopMode';
|
|
30
32
|
export { default as removeDuplicateItem } from './utils/removeDuplicateItem';
|
|
31
33
|
export { default as snaPreProcess } from './utils/snaPreProcess';
|
package/lib/index.js
CHANGED
|
@@ -26,6 +26,8 @@ export { default as MUITheme } from './components/MUITheme';
|
|
|
26
26
|
export { default as Header } from './components/Header';
|
|
27
27
|
export { default as Footer } from './components/Footer';
|
|
28
28
|
export { default as Keywords } from './components/Keywords';
|
|
29
|
+
export { default as CollapseContent } from './components/CollapseContent';
|
|
30
|
+
export { default as MoreButton } from './components/MoreButton';
|
|
29
31
|
export { default as isDevelopMode } from './utils/isDevelopMode';
|
|
30
32
|
export { default as removeDuplicateItem } from './utils/removeDuplicateItem';
|
|
31
33
|
export { default as snaPreProcess } from './utils/snaPreProcess';
|
package/package.json
CHANGED
|
@@ -1,114 +1,116 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@daoyi/nmtl-ui",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
|
|
5
|
-
"author": "daoyi",
|
|
6
|
-
"main": "lib/index.js",
|
|
7
|
-
"typings": "lib/index.d.ts",
|
|
8
|
-
"files": [
|
|
9
|
-
"lib"
|
|
10
|
-
],
|
|
11
|
-
"repository": {
|
|
12
|
-
"type": "git",
|
|
13
|
-
"url": "https://github.com/HsunTsai/react-storybook-jsx-starter"
|
|
14
|
-
},
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"@material-ui/core": "4.12.3",
|
|
17
|
-
"@material-ui/icons": "4.11.2",
|
|
18
|
-
"@material-ui/lab": "4.0.0-alpha.60",
|
|
19
|
-
"@material-ui/styles": "4.11.4",
|
|
20
|
-
"@rollup/plugin-json": "4.1.0",
|
|
21
|
-
"axios": "0.21.1",
|
|
22
|
-
"classnames": "2.3.1",
|
|
23
|
-
"emailjs-com": "2.6.4",
|
|
24
|
-
"formik": "2.2.9",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"react
|
|
37
|
-
"react-
|
|
38
|
-
"react-
|
|
39
|
-
"react-
|
|
40
|
-
"react-
|
|
41
|
-
"react-
|
|
42
|
-
"react-
|
|
43
|
-
"react-
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
"@babel/
|
|
52
|
-
"@babel/plugin-
|
|
53
|
-
"@babel/
|
|
54
|
-
"@babel/
|
|
55
|
-
"@
|
|
56
|
-
"@
|
|
57
|
-
"@
|
|
58
|
-
"@storybook/addon-
|
|
59
|
-
"@storybook/
|
|
60
|
-
"@storybook/
|
|
61
|
-
"@storybook/
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"eslint
|
|
68
|
-
"eslint-config-
|
|
69
|
-
"eslint-
|
|
70
|
-
"eslint-
|
|
71
|
-
"eslint-
|
|
72
|
-
"eslint-plugin-
|
|
73
|
-
"eslint-plugin-
|
|
74
|
-
"eslint-plugin-
|
|
75
|
-
"eslint-plugin-
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"rollup
|
|
80
|
-
"rollup-plugin-
|
|
81
|
-
"rollup-plugin-
|
|
82
|
-
"rollup-plugin-
|
|
83
|
-
"rollup-plugin-
|
|
84
|
-
"rollup-plugin-
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
"
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
"last 1
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
"
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
"build
|
|
108
|
-
"
|
|
109
|
-
"
|
|
110
|
-
"
|
|
111
|
-
"
|
|
112
|
-
"pub
|
|
113
|
-
|
|
114
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@daoyi/nmtl-ui",
|
|
3
|
+
"version": "1.1.43-beta.3",
|
|
4
|
+
"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
|
|
5
|
+
"author": "daoyi",
|
|
6
|
+
"main": "lib/index.js",
|
|
7
|
+
"typings": "lib/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"lib"
|
|
10
|
+
],
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/HsunTsai/react-storybook-jsx-starter"
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"@material-ui/core": "4.12.3",
|
|
17
|
+
"@material-ui/icons": "4.11.2",
|
|
18
|
+
"@material-ui/lab": "4.0.0-alpha.60",
|
|
19
|
+
"@material-ui/styles": "4.11.4",
|
|
20
|
+
"@rollup/plugin-json": "4.1.0",
|
|
21
|
+
"axios": "0.21.1",
|
|
22
|
+
"classnames": "2.3.1",
|
|
23
|
+
"emailjs-com": "2.6.4",
|
|
24
|
+
"formik": "2.2.9",
|
|
25
|
+
"html-to-react": "1.4.5",
|
|
26
|
+
"http-proxy-middleware": "1.3.1",
|
|
27
|
+
"jquery": "3.6.0",
|
|
28
|
+
"js-file-download": "0.4.12",
|
|
29
|
+
"lodash": "4.17.21",
|
|
30
|
+
"markdown-it": "12.0.6",
|
|
31
|
+
"moment": "2.29.1",
|
|
32
|
+
"node-sass": "4.14.1",
|
|
33
|
+
"notistack": "1.0.10",
|
|
34
|
+
"prop-types": "15.7.2",
|
|
35
|
+
"query-string": "6.12.1",
|
|
36
|
+
"react": "16.14.0",
|
|
37
|
+
"react-awesome-lightbox": "^1.8.1",
|
|
38
|
+
"react-dom": "16.14.0",
|
|
39
|
+
"react-dropzone": "11.3.2",
|
|
40
|
+
"react-facebook-login": "4.1.1",
|
|
41
|
+
"react-google-login": "5.2.2",
|
|
42
|
+
"react-intl": "5.8.0",
|
|
43
|
+
"react-redux": "7.2.5",
|
|
44
|
+
"react-router-dom": "5.2.0",
|
|
45
|
+
"react-slick": "^0.28.1",
|
|
46
|
+
"redux": "4.1.0",
|
|
47
|
+
"sass": "1.41.1",
|
|
48
|
+
"slick-carousel": "^1.8.1"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@babel/core": "7.15.5",
|
|
52
|
+
"@babel/plugin-proposal-class-properties": "7.14.5",
|
|
53
|
+
"@babel/plugin-proposal-private-methods": "7.14.5",
|
|
54
|
+
"@babel/plugin-syntax-dynamic-import": "7.8.3",
|
|
55
|
+
"@babel/preset-env": "7.15.6",
|
|
56
|
+
"@babel/preset-react": "7.14.5",
|
|
57
|
+
"@rollup/plugin-image": "2.1.1",
|
|
58
|
+
"@storybook/addon-essentials": "6.3.5",
|
|
59
|
+
"@storybook/addon-links": "6.3.8",
|
|
60
|
+
"@storybook/addon-notes": "5.3.21",
|
|
61
|
+
"@storybook/addons": "6.3.8",
|
|
62
|
+
"@storybook/preset-scss": "1.0.3",
|
|
63
|
+
"@storybook/react": "6.3.8",
|
|
64
|
+
"autoprefixer": "9.8.6",
|
|
65
|
+
"babel-loader": "8.2.2",
|
|
66
|
+
"css-loader": "1.0.1",
|
|
67
|
+
"eslint": "7.2.0",
|
|
68
|
+
"eslint-config-airbnb": "18.2.1",
|
|
69
|
+
"eslint-config-node": "4.1.0",
|
|
70
|
+
"eslint-config-prettier": "8.3.0",
|
|
71
|
+
"eslint-loader": "4.0.2",
|
|
72
|
+
"eslint-plugin-import": "2.22.1",
|
|
73
|
+
"eslint-plugin-jsx-a11y": "6.4.1",
|
|
74
|
+
"eslint-plugin-node": "11.1.0",
|
|
75
|
+
"eslint-plugin-prettier": "3.4.1",
|
|
76
|
+
"eslint-plugin-react": "7.21.5",
|
|
77
|
+
"eslint-plugin-react-hooks": "1.7.0",
|
|
78
|
+
"prettier": "2.4.1",
|
|
79
|
+
"rollup": "2.56.3",
|
|
80
|
+
"rollup-plugin-babel": "4.4.0",
|
|
81
|
+
"rollup-plugin-cleaner": "1.0.0",
|
|
82
|
+
"rollup-plugin-commonjs": "10.1.0",
|
|
83
|
+
"rollup-plugin-node-resolve": "5.2.0",
|
|
84
|
+
"rollup-plugin-postcss": "4.0.1",
|
|
85
|
+
"rollup-plugin-replace": "2.2.0",
|
|
86
|
+
"rollup-plugin-terser": "7.0.2",
|
|
87
|
+
"sass-loader": "7.1.0",
|
|
88
|
+
"style-loader": "0.22.1"
|
|
89
|
+
},
|
|
90
|
+
"browserslist": {
|
|
91
|
+
"production": [
|
|
92
|
+
">0.2%",
|
|
93
|
+
"not dead",
|
|
94
|
+
"not op_mini all"
|
|
95
|
+
],
|
|
96
|
+
"development": [
|
|
97
|
+
"last 1 chrome version",
|
|
98
|
+
"last 1 firefox version",
|
|
99
|
+
"last 1 safari version"
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
"scripts": {
|
|
103
|
+
"start": "set NODE_OPTIONS=--max_old_space_size=16384 && yarn storybook",
|
|
104
|
+
"lint": "eslint ./src/**/*.{js,jsx}",
|
|
105
|
+
"format": "prettier --write --tab-width 4 --use-tabs true \"{,src/**/}*.{js,jsx}\"",
|
|
106
|
+
"storybook": "start-storybook -p 6006",
|
|
107
|
+
"build": "rollup -c && npm run build-index",
|
|
108
|
+
"build-index": "node ./rollup.index.js",
|
|
109
|
+
"build-storybook": "build-storybook -c .storybook -o public",
|
|
110
|
+
"create": "node ./buildUtils/create.js",
|
|
111
|
+
"updateStory": "node ./buildUtils/updateStories.js",
|
|
112
|
+
"pub": "npm version patch -m Publish && npm publish",
|
|
113
|
+
"pub-alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha",
|
|
114
|
+
"pub-beta": "npm version prerelease --preid=beta && npm publish --tag beta"
|
|
115
|
+
}
|
|
116
|
+
}
|