@hitachivantara/app-shell-ui 0.38.6 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,30 +1,31 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { HvContainer as
|
|
1
|
+
import { jsxs as d, jsx as i } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { HvContainer as l } from "@hitachivantara/uikit-react-core";
|
|
3
3
|
import { useHvAppShellConfig as p } from "@hitachivantara/app-shell-shared";
|
|
4
|
-
import
|
|
5
|
-
import { StyledContainer as
|
|
6
|
-
import
|
|
4
|
+
import v from "../../../providers/hooks/useNavigationContext.js";
|
|
5
|
+
import { StyledContainer as h, StyledMain as f } from "./styles.js";
|
|
6
|
+
import g from "../../../providers/hooks/useLayoutContext.js";
|
|
7
7
|
import x from "../VerticalNavigation/VerticalNavigation.js";
|
|
8
|
-
const
|
|
8
|
+
const u = ({
|
|
9
9
|
children: a
|
|
10
10
|
}) => {
|
|
11
11
|
const {
|
|
12
12
|
hasVerticalNavigation: r,
|
|
13
13
|
verticalNavigationMode: e,
|
|
14
14
|
showHeaderSubMenu: n,
|
|
15
|
-
isCompactMode:
|
|
15
|
+
isCompactMode: o,
|
|
16
16
|
switchVerticalNavigationMode: m
|
|
17
|
-
} = l(), {
|
|
18
|
-
bannerMaxHeight: s
|
|
19
17
|
} = v(), {
|
|
20
|
-
|
|
18
|
+
bannerMaxHeight: s,
|
|
19
|
+
verticalNavigationWidth: c
|
|
20
|
+
} = g(), {
|
|
21
|
+
mainPanel: t
|
|
21
22
|
} = p();
|
|
22
|
-
return /* @__PURE__ */
|
|
23
|
-
r && e !== "CLOSED" && /* @__PURE__ */
|
|
24
|
-
/* @__PURE__ */
|
|
23
|
+
return /* @__PURE__ */ d(h, { showHeaderSubMenu: n, isCompactMode: o, children: [
|
|
24
|
+
r && e !== "CLOSED" && /* @__PURE__ */ i(x, { onClickAway: o ? m : void 0 }),
|
|
25
|
+
/* @__PURE__ */ i(f, { paddingTop: s, verticalNavigationWidth: c, children: /* @__PURE__ */ i(l, { maxWidth: (t == null ? void 0 : t.maxWidth) ?? "xl", children: a }) })
|
|
25
26
|
] });
|
|
26
|
-
},
|
|
27
|
+
}, V = u;
|
|
27
28
|
export {
|
|
28
|
-
|
|
29
|
+
V as default
|
|
29
30
|
};
|
|
30
31
|
//# sourceMappingURL=Main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Main.js","sources":["../../../../../src/components/layout/Main/Main.tsx"],"sourcesContent":["import { HvContainer } from \"@hitachivantara/uikit-react-core\";\n\nimport { useHvAppShellConfig } from \"@hitachivantara/app-shell-shared\";\n\nimport useNavigationContext from \"../../../providers/hooks/useNavigationContext\";\nimport VerticalNavigation from \"../VerticalNavigation\";\n\nimport { StyledMain, StyledContainer } from \"./styles\";\nimport useLayoutContext from \"../../../providers/hooks/useLayoutContext\";\n\nexport type MainProps = {\n children: React.ReactNode;\n};\n\nconst Main = ({ children }: MainProps) => {\n const {\n hasVerticalNavigation,\n verticalNavigationMode,\n showHeaderSubMenu,\n isCompactMode,\n switchVerticalNavigationMode\n } = useNavigationContext();\n const { bannerMaxHeight } = useLayoutContext();\n const { mainPanel } = useHvAppShellConfig();\n\n return (\n <StyledContainer\n showHeaderSubMenu={showHeaderSubMenu}\n isCompactMode={isCompactMode}>\n {hasVerticalNavigation && verticalNavigationMode !== \"CLOSED\" && (\n <VerticalNavigation\n onClickAway={isCompactMode ? switchVerticalNavigationMode : undefined}\n />\n )}\n\n <StyledMain
|
|
1
|
+
{"version":3,"file":"Main.js","sources":["../../../../../src/components/layout/Main/Main.tsx"],"sourcesContent":["import { HvContainer } from \"@hitachivantara/uikit-react-core\";\n\nimport { useHvAppShellConfig } from \"@hitachivantara/app-shell-shared\";\n\nimport useNavigationContext from \"../../../providers/hooks/useNavigationContext\";\nimport VerticalNavigation from \"../VerticalNavigation\";\n\nimport { StyledMain, StyledContainer } from \"./styles\";\nimport useLayoutContext from \"../../../providers/hooks/useLayoutContext\";\n\nexport type MainProps = {\n children: React.ReactNode;\n};\n\nconst Main = ({ children }: MainProps) => {\n const {\n hasVerticalNavigation,\n verticalNavigationMode,\n showHeaderSubMenu,\n isCompactMode,\n switchVerticalNavigationMode\n } = useNavigationContext();\n const { bannerMaxHeight, verticalNavigationWidth } = useLayoutContext();\n const { mainPanel } = useHvAppShellConfig();\n\n return (\n <StyledContainer\n showHeaderSubMenu={showHeaderSubMenu}\n isCompactMode={isCompactMode}>\n {hasVerticalNavigation && verticalNavigationMode !== \"CLOSED\" && (\n <VerticalNavigation\n onClickAway={isCompactMode ? switchVerticalNavigationMode : undefined}\n />\n )}\n\n <StyledMain\n paddingTop={bannerMaxHeight}\n verticalNavigationWidth={verticalNavigationWidth}>\n <HvContainer maxWidth={mainPanel?.maxWidth ?? \"xl\"}>\n {children}\n </HvContainer>\n </StyledMain>\n </StyledContainer>\n );\n};\n\nexport default Main;\n"],"names":["Main","children","hasVerticalNavigation","verticalNavigationMode","showHeaderSubMenu","isCompactMode","switchVerticalNavigationMode","useNavigationContext","bannerMaxHeight","verticalNavigationWidth","useLayoutContext","mainPanel","useHvAppShellConfig","jsxs","StyledContainer","jsx","VerticalNavigation","undefined","StyledMain","HvContainer","maxWidth","Main$1"],"mappings":";;;;;;;AAcA,MAAMA,IAAOA,CAAC;AAAA,EAAEC,UAAAA;AAAoB,MAAM;AAClC,QAAA;AAAA,IACJC,uBAAAA;AAAAA,IACAC,wBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,8BAAAA;AAAAA,MACEC,EAAqB,GACnB;AAAA,IAAEC,iBAAAA;AAAAA,IAAiBC,yBAAAA;AAAAA,MAA4BC,EAAiB,GAChE;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAoB;AAGxC,SAAA,gBAAAC,EAACC,GACC,EAAA,mBAAAV,GACA,eAAAC,GACCH,UAAAA;AAAAA,IAAAA,KAAyBC,MAA2B,YACnD,gBAAAY,EAACC,KACC,aAAaX,IAAgBC,IAA+BW,QAE/D;AAAA,IAEA,gBAAAF,EAAAG,GAAA,EACC,YAAYV,GACZ,yBAAAC,GACA,UAAA,gBAAAM,EAACI,GAAY,EAAA,WAAUR,KAAAA,gBAAAA,EAAWS,aAAY,MAC3CnB,UAAAA,EACH,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEAoB,IAAerB;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { theme as
|
|
3
|
-
const
|
|
1
|
+
import b from "@emotion/styled/base";
|
|
2
|
+
import { theme as l } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
const G = 68, g = /* @__PURE__ */ b("div", process.env.NODE_ENV === "production" ? {
|
|
4
4
|
target: "ew4l8di1"
|
|
5
5
|
} : {
|
|
6
6
|
target: "ew4l8di1",
|
|
7
7
|
label: "StyledContainer"
|
|
8
|
-
})("display:flex;margin-top:", (
|
|
8
|
+
})("display:flex;margin-top:", (c) => c.showHeaderSubMenu && !c.isCompactMode ? `calc(${l.header.height} + ${G}px)` : l.header.height, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQndEIiwiZmlsZSI6Ii9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG4vKipcbiAqIFRoZSB2YWx1ZSBvZiB0aGUgc3ViIGhlYWRlciBzaG91bGQgYmUgY29taW5nIGZyb20gVUktS0lULCBhdCB0aGlzIHRpbWUgaXQgaXMgbm90LCBzbyB3ZSBhcmUgaGFyZGNvZGluZyB0aGUgdmFsdWVcbiAqIGhlcmUuIDY0cHggZm9yIHRoZSBoZWlnaHQgYW5kIGFuIGV4dHJhIDRweCBmb3IgdGhlIHRvcCBwYWRkaW5nLlxuICovXG5leHBvcnQgY29uc3QgU1VCX0hFQURFUl9IRUlHSFQgPSA2ODtcblxuaW50ZXJmYWNlIFN0eWxlZENvbnRhaW5lclByb3BzIHtcbiAgc2hvd0hlYWRlclN1Yk1lbnU/OiBib29sZWFuO1xuICBpc0NvbXBhY3RNb2RlPzogYm9vbGVhbjtcbn1cbmludGVyZmFjZSBTdHlsZWRNYWluUHJvcHMge1xuICBwYWRkaW5nVG9wPzogbnVtYmVyO1xuICB2ZXJ0aWNhbE5hdmlnYXRpb25XaWR0aD86IG51bWJlcjtcbn1cblxuY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkLmRpdjxTdHlsZWRDb250YWluZXJQcm9wcz5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIG1hcmdpbi10b3A6ICR7cHJvcHMgPT4ge1xuICAgIGlmIChwcm9wcy5zaG93SGVhZGVyU3ViTWVudSAmJiAhcHJvcHMuaXNDb21wYWN0TW9kZSkge1xuICAgICAgcmV0dXJuIGBjYWxjKCR7dGhlbWUuaGVhZGVyLmhlaWdodH0gKyAke1NVQl9IRUFERVJfSEVJR0hUfXB4KWA7XG4gICAgfVxuXG4gICAgcmV0dXJuIHRoZW1lLmhlYWRlci5oZWlnaHQ7XG4gIH19O1xuYDtcblxuY29uc3QgU3R5bGVkTWFpbiA9IHN0eWxlZC5tYWluPFN0eWxlZE1haW5Qcm9wcz5gXG4gIGZsZXg6IDE7XG4gIHBhZGRpbmctdG9wOiAke3Byb3BzID0+IHtcbiAgICByZXR1cm4gYCR7cHJvcHMucGFkZGluZ1RvcH1weGA7XG4gIH19O1xuICB3aWR0aDogJHtwcm9wcyA9PiB7XG4gICAgcmV0dXJuIGBjYWxjKDEwMCUgLSAke3Byb3BzLnZlcnRpY2FsTmF2aWdhdGlvbldpZHRofXB4KWA7XG4gIH19O1xuYDtcblxuZXhwb3J0IHsgU3R5bGVkQ29udGFpbmVyLCBTdHlsZWRNYWluIH07XG4iXX0= */")), X = /* @__PURE__ */ b("main", process.env.NODE_ENV === "production" ? {
|
|
9
9
|
target: "ew4l8di0"
|
|
10
10
|
} : {
|
|
11
11
|
target: "ew4l8di0",
|
|
12
12
|
label: "StyledMain"
|
|
13
|
-
})("flex:1;padding-top:", (
|
|
13
|
+
})("flex:1;padding-top:", (c) => `${c.paddingTop}px`, ";width:", (c) => `calc(100% - ${c.verticalNavigationWidth}px)`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QitDIiwiZmlsZSI6Ii9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG4vKipcbiAqIFRoZSB2YWx1ZSBvZiB0aGUgc3ViIGhlYWRlciBzaG91bGQgYmUgY29taW5nIGZyb20gVUktS0lULCBhdCB0aGlzIHRpbWUgaXQgaXMgbm90LCBzbyB3ZSBhcmUgaGFyZGNvZGluZyB0aGUgdmFsdWVcbiAqIGhlcmUuIDY0cHggZm9yIHRoZSBoZWlnaHQgYW5kIGFuIGV4dHJhIDRweCBmb3IgdGhlIHRvcCBwYWRkaW5nLlxuICovXG5leHBvcnQgY29uc3QgU1VCX0hFQURFUl9IRUlHSFQgPSA2ODtcblxuaW50ZXJmYWNlIFN0eWxlZENvbnRhaW5lclByb3BzIHtcbiAgc2hvd0hlYWRlclN1Yk1lbnU/OiBib29sZWFuO1xuICBpc0NvbXBhY3RNb2RlPzogYm9vbGVhbjtcbn1cbmludGVyZmFjZSBTdHlsZWRNYWluUHJvcHMge1xuICBwYWRkaW5nVG9wPzogbnVtYmVyO1xuICB2ZXJ0aWNhbE5hdmlnYXRpb25XaWR0aD86IG51bWJlcjtcbn1cblxuY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkLmRpdjxTdHlsZWRDb250YWluZXJQcm9wcz5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIG1hcmdpbi10b3A6ICR7cHJvcHMgPT4ge1xuICAgIGlmIChwcm9wcy5zaG93SGVhZGVyU3ViTWVudSAmJiAhcHJvcHMuaXNDb21wYWN0TW9kZSkge1xuICAgICAgcmV0dXJuIGBjYWxjKCR7dGhlbWUuaGVhZGVyLmhlaWdodH0gKyAke1NVQl9IRUFERVJfSEVJR0hUfXB4KWA7XG4gICAgfVxuXG4gICAgcmV0dXJuIHRoZW1lLmhlYWRlci5oZWlnaHQ7XG4gIH19O1xuYDtcblxuY29uc3QgU3R5bGVkTWFpbiA9IHN0eWxlZC5tYWluPFN0eWxlZE1haW5Qcm9wcz5gXG4gIGZsZXg6IDE7XG4gIHBhZGRpbmctdG9wOiAke3Byb3BzID0+IHtcbiAgICByZXR1cm4gYCR7cHJvcHMucGFkZGluZ1RvcH1weGA7XG4gIH19O1xuICB3aWR0aDogJHtwcm9wcyA9PiB7XG4gICAgcmV0dXJuIGBjYWxjKDEwMCUgLSAke3Byb3BzLnZlcnRpY2FsTmF2aWdhdGlvbldpZHRofXB4KWA7XG4gIH19O1xuYDtcblxuZXhwb3J0IHsgU3R5bGVkQ29udGFpbmVyLCBTdHlsZWRNYWluIH07XG4iXX0= */"));
|
|
14
14
|
export {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
G as SUB_HEADER_HEIGHT,
|
|
16
|
+
g as StyledContainer,
|
|
17
|
+
X as StyledMain
|
|
18
18
|
};
|
|
19
19
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../src/components/layout/Main/styles.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\n/**\n * The value of the sub header should be coming from UI-KIT, at this time it is not, so we are hardcoding the value\n * here. 64px for the height and an extra 4px for the top padding.\n */\nexport const SUB_HEADER_HEIGHT = 68;\n\ninterface StyledContainerProps {\n showHeaderSubMenu?: boolean;\n isCompactMode?: boolean;\n}\ninterface StyledMainProps {\n paddingTop?: number;\n}\n\nconst StyledContainer = styled.div<StyledContainerProps>`\n display: flex;\n margin-top: ${props => {\n if (props.showHeaderSubMenu && !props.isCompactMode) {\n return `calc(${theme.header.height} + ${SUB_HEADER_HEIGHT}px)`;\n }\n\n return theme.header.height;\n }};\n`;\n\nconst StyledMain = styled.main<StyledMainProps>`\n flex: 1;\n padding-top: ${props => {\n return `${props.paddingTop}px`;\n }};\n`;\n\nexport { StyledContainer, StyledMain };\n"],"names":["SUB_HEADER_HEIGHT","StyledContainer","_styled","process","env","NODE_ENV","target","label","props","showHeaderSubMenu","isCompactMode","theme","header","height","StyledMain","paddingTop"],"mappings":";;AAQO,MAAMA,IAAoB,
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../../src/components/layout/Main/styles.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\n/**\n * The value of the sub header should be coming from UI-KIT, at this time it is not, so we are hardcoding the value\n * here. 64px for the height and an extra 4px for the top padding.\n */\nexport const SUB_HEADER_HEIGHT = 68;\n\ninterface StyledContainerProps {\n showHeaderSubMenu?: boolean;\n isCompactMode?: boolean;\n}\ninterface StyledMainProps {\n paddingTop?: number;\n verticalNavigationWidth?: number;\n}\n\nconst StyledContainer = styled.div<StyledContainerProps>`\n display: flex;\n margin-top: ${props => {\n if (props.showHeaderSubMenu && !props.isCompactMode) {\n return `calc(${theme.header.height} + ${SUB_HEADER_HEIGHT}px)`;\n }\n\n return theme.header.height;\n }};\n`;\n\nconst StyledMain = styled.main<StyledMainProps>`\n flex: 1;\n padding-top: ${props => {\n return `${props.paddingTop}px`;\n }};\n width: ${props => {\n return `calc(100% - ${props.verticalNavigationWidth}px)`;\n }};\n`;\n\nexport { StyledContainer, StyledMain };\n"],"names":["SUB_HEADER_HEIGHT","StyledContainer","_styled","process","env","NODE_ENV","target","label","props","showHeaderSubMenu","isCompactMode","theme","header","height","StyledMain","paddingTop","verticalNavigationWidth"],"mappings":";;AAQO,MAAMA,IAAoB,IAW3BC,IAAe,gBAAAC,EAAA,OAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,4BAELC,CAASA,MACjBA,EAAMC,qBAAqB,CAACD,EAAME,gBAC5B,QAAOC,EAAMC,OAAOC,MAAO,MAAKb,CAAkB,QAGrDW,EAAMC,OAAOC,eACrBV,QAAAC,IAAAC,aACF,eAAA,KAAA,03DAAA,GAEKS,IAAU,gBAAAZ,EAAA,QAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAA,uBAECC,CAASA,MACd,GAAEA,EAAMO,UAAW,MAC5B,WACQP,CAASA,MACR,eAAcA,EAAMQ,uBAAwB,cACrDb,QAAAC,IAAAC,aACF,eAAA,KAAA,03DAAA;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/app-shell-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "AppShell Component",
|
|
5
5
|
"author": "Hitachi Vantara - Boba Fett Team",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"@emotion/css": "^11.10.5",
|
|
39
39
|
"@emotion/react": "^11.10.5",
|
|
40
40
|
"@emotion/styled": "^11.10.5",
|
|
41
|
-
"@hitachivantara/app-shell-events": "0.
|
|
42
|
-
"@hitachivantara/app-shell-navigation": "0.
|
|
43
|
-
"@hitachivantara/app-shell-shared": "0.
|
|
41
|
+
"@hitachivantara/app-shell-events": "1.0.0",
|
|
42
|
+
"@hitachivantara/app-shell-navigation": "1.0.0",
|
|
43
|
+
"@hitachivantara/app-shell-shared": "1.0.0",
|
|
44
44
|
"@hitachivantara/uikit-react-core": "^5.31.0",
|
|
45
45
|
"@hitachivantara/uikit-react-icons": "^5.6.8",
|
|
46
46
|
"@mui/material": "^5.12.3",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"vite-plugin-dts": "^3.6.4",
|
|
69
69
|
"vite-tsconfig-paths": "^4.0.5"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "e40a1b58e984df9a38dfc4630d3a3a8ad5b6c100"
|
|
72
72
|
}
|