@laerdal/life-react-components 1.11.0-dev.15 → 1.11.0-dev.16
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/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +14 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts +3 -0
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js +5 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +13 -19
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +15 -18
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
- package/dist/Switcher/MobileCustomMenuContent.cjs +11 -4
- package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -1
- package/dist/Switcher/MobileCustomMenuContent.d.ts +2 -1
- package/dist/Switcher/MobileCustomMenuContent.js +12 -5
- package/dist/Switcher/MobileCustomMenuContent.js.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.cjs +4 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.js +4 -0
- package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.ScrollableContainer = exports.RowLayout = exports.Right = exports.MobileMenuWrapper = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
|
|
10
|
+
exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.ScrollableContainer = exports.RowLayout = exports.Right = exports.MobileMenuWrapper = exports.MobileHeaderText = exports.MobileHeaderNote = exports.MobileHeaderContainer = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -19,7 +19,7 @@ var _reactRouterDom = require("react-router-dom");
|
|
|
19
19
|
|
|
20
20
|
var _types = require("../../types");
|
|
21
21
|
|
|
22
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
22
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
23
23
|
|
|
24
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
25
|
|
|
@@ -72,4 +72,16 @@ exports.MobileMenuWrapper = MobileMenuWrapper;
|
|
|
72
72
|
var ScrollableContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ", "\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
|
|
73
73
|
|
|
74
74
|
exports.ScrollableContainer = ScrollableContainer;
|
|
75
|
+
|
|
76
|
+
var MobileHeaderText = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
|
|
77
|
+
|
|
78
|
+
exports.MobileHeaderText = MobileHeaderText;
|
|
79
|
+
|
|
80
|
+
var MobileHeaderNote = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n word-break: break-all;\n ", "\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
|
|
81
|
+
|
|
82
|
+
exports.MobileHeaderNote = MobileHeaderNote;
|
|
83
|
+
|
|
84
|
+
var MobileHeaderContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n display: flex;\n flex-direction: column;\n"])), _styles.COLORS.neutral_200);
|
|
85
|
+
|
|
86
|
+
exports.MobileHeaderContainer = MobileHeaderContainer;
|
|
75
87
|
//# sourceMappingURL=CommonStyles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","Size","Small"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,uJACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,wQAAf;AAaO,IAAME,OAAO,OAAGF,2BAAH,uMAAb;;AAWA,IAAMG,MAAM,OAAGH,2BAAH,uMAAZ;;;AAWA,IAAMI,IAAI,GAAGX,0BAAOC,GAAV,8eAEKG,eAAOC,KAFZ,EAOJO,kBAAUC,UAPN,EAYbC,oBAAYC,KAZC,EAmBAT,QAnBA,EAwBAE,SAxBA,CAAV;;;;AA4BA,IAAMQ,KAAK,GAAGhB,0BAAOC,GAAV,+HAAX;;;;AAKA,IAAMgB,QAAQ,GAAGjB,0BAAOkB,IAAV,uKACVd,eAAOe,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGpB,0BAAOqB,EAAV,kNAAjB;;;;AAUA,IAAMC,eAAe,GAAGtB,0BAAOuB,EAAV,mPAArB;;;AAeA,IAAMC,0BAA0B,OAAGC,qBAAH,orBAMxBb,kBAAUc,KANc,EAOftB,eAAOuB,UAPQ,EAUxBvB,eAAOwB,WAViB,EAcxBxB,eAAOwB,WAdiB,EAmBxBhB,kBAAUiB,KAnBc,EAqBjCC,mBArBiC,EA4BxBlB,kBAAUmB,MA5Bc,EA6BrB3B,eAAO4B,WA7Bc,EAgCxB5B,eAAO6B,WAhCiB,EAoCxB7B,eAAO6B,WApCiB,EA0CxB7B,eAAO8B,WA1CiB,EA8CxB9B,eAAO8B,WA9CiB,EAiDf9B,eAAO+B,WAjDQ,CAAhC;;AAqDA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,4RAOjB,+BAAkBC,2BAAmBC,OAArC,EAA8CnC,eAAOoC,KAArD,CAPiB,CAAd;;AAeA,IAAMC,QAAQ,OAAGlC,2BAAH,wNAAd;;;AAWA,IAAMmC,iBAAiB,GAAG1C,0BAAOC,GAAV,6MAAvB;;;;AASA,IAAM0C,mBAAmB,GAAG3C,0BAAOC,GAAV,0UAY5B,8BAAiB2C,YAAKC,KAAtB,CAZ4B,CAAzB","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles, scrollBarStyling } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles';\nimport { Z_INDEXES } from '../../styles';\nimport { Size } from '../../types';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n transform: translateX(100%);\n }\n`;\n\nexport const fadeOut = keyframes`\n 0% {\n opacity: 1;\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const fadeIn = keyframes`\n 0% {\n opacity: 0;\n visibility: hidden;\n }\n to {\n opacity: 1;\n visibility: visible;\n }\n`;\n\nexport const Menu = styled.div`\n height: 100%;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n right: 0;\n top: 0;\n position: absolute;\n z-index: ${Z_INDEXES.off_canvas};\n align-items: center;\n\n width: 320px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n\n .open & {\n visibility: visible;\n display: flex;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n visibility: hidden;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n\n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li {\n position: relative;\n }\n\n li:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n\n a {\n color: ${COLORS.primary_600};\n }\n\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n\n ${focusStyles}\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n\n a {\n color: ${COLORS.primary_800};\n }\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n\n svg {\n color: ${COLORS.neutral_300};\n }\n\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const MobileMenuWrapper = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\nexport const ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n`;\n"],"file":"CommonStyles.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","Size","Small","MobileHeaderText","Bold","MobileHeaderNote","ParagraphTextStyle","MobileHeaderContainer","neutral_200"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,uJACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,wQAAf;AAaO,IAAME,OAAO,OAAGF,2BAAH,uMAAb;;AAWA,IAAMG,MAAM,OAAGH,2BAAH,uMAAZ;;;AAWA,IAAMI,IAAI,GAAGX,0BAAOC,GAAV,8eAEKG,eAAOC,KAFZ,EAOJO,kBAAUC,UAPN,EAYbC,oBAAYC,KAZC,EAmBAT,QAnBA,EAwBAE,SAxBA,CAAV;;;;AA4BA,IAAMQ,KAAK,GAAGhB,0BAAOC,GAAV,+HAAX;;;;AAKA,IAAMgB,QAAQ,GAAGjB,0BAAOkB,IAAV,uKACVd,eAAOe,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGpB,0BAAOqB,EAAV,kNAAjB;;;;AAUA,IAAMC,eAAe,GAAGtB,0BAAOuB,EAAV,mPAArB;;;AAeA,IAAMC,0BAA0B,OAAGC,qBAAH,orBAMxBb,kBAAUc,KANc,EAOftB,eAAOuB,UAPQ,EAUxBvB,eAAOwB,WAViB,EAcxBxB,eAAOwB,WAdiB,EAmBxBhB,kBAAUiB,KAnBc,EAqBjCC,mBArBiC,EA4BxBlB,kBAAUmB,MA5Bc,EA6BrB3B,eAAO4B,WA7Bc,EAgCxB5B,eAAO6B,WAhCiB,EAoCxB7B,eAAO6B,WApCiB,EA0CxB7B,eAAO8B,WA1CiB,EA8CxB9B,eAAO8B,WA9CiB,EAiDf9B,eAAO+B,WAjDQ,CAAhC;;AAqDA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,4RAOjB,+BAAkBC,2BAAmBC,OAArC,EAA8CnC,eAAOoC,KAArD,CAPiB,CAAd;;AAeA,IAAMC,QAAQ,OAAGlC,2BAAH,wNAAd;;;AAWA,IAAMmC,iBAAiB,GAAG1C,0BAAOC,GAAV,6MAAvB;;;;AASA,IAAM0C,mBAAmB,GAAG3C,0BAAOC,GAAV,0UAY5B,8BAAiB2C,YAAKC,KAAtB,CAZ4B,CAAzB;;;;AAmBA,IAAMC,gBAAgB,GAAG9C,0BAAOC,GAAV,2HACzB,+BAAkBqC,2BAAmBS,IAArC,EAA2C3C,eAAOe,WAAlD,CADyB,EAEzBL,oBAAYC,KAFa,EAGvB,+BAAkBuB,2BAAmBS,IAArC,EAA2C3C,eAAOe,WAAlD,CAHuB,CAAtB;;;;AAMA,IAAM6B,gBAAgB,GAAGhD,0BAAOC,GAAV,4HAEzB,gCAAmBgD,2BAAmBV,OAAtC,EAA+CnC,eAAOe,WAAtD,CAFyB,CAAtB;;;;AAKA,IAAM+B,qBAAqB,GAAGlD,0BAAOC,GAAV,+OAILG,eAAO+C,WAJF,CAA3B","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentSStyling, focusStyles, scrollBarStyling, ParagraphXSStyling, ParagraphTextStyle } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles';\nimport { Z_INDEXES } from '../../styles';\nimport { Size } from '../../types';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n transform: translateX(100%);\n }\n`;\n\nexport const fadeOut = keyframes`\n 0% {\n opacity: 1;\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const fadeIn = keyframes`\n 0% {\n opacity: 0;\n visibility: hidden;\n }\n to {\n opacity: 1;\n visibility: visible;\n }\n`;\n\nexport const Menu = styled.div`\n height: 100%;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n right: 0;\n top: 0;\n position: absolute;\n z-index: ${Z_INDEXES.off_canvas};\n align-items: center;\n\n width: 320px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n\n .open & {\n visibility: visible;\n display: flex;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n visibility: hidden;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n\n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li {\n position: relative;\n }\n\n li:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n\n a {\n color: ${COLORS.primary_600};\n }\n\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n\n ${focusStyles}\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n\n a {\n color: ${COLORS.primary_800};\n }\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n\n svg {\n color: ${COLORS.neutral_300};\n }\n\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const MobileMenuWrapper = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\nexport const ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n`;\n\nexport const MobileHeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nexport const MobileHeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const MobileHeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n"],"file":"CommonStyles.cjs"}
|
|
@@ -13,3 +13,6 @@ export declare const MenuLink: import("styled-components").StyledComponent<typeo
|
|
|
13
13
|
export declare const flowDown: import("styled-components").Keyframes;
|
|
14
14
|
export declare const MobileMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
15
|
export declare const ScrollableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
|
+
export declare const MobileHeaderText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
17
|
+
export declare const MobileHeaderNote: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
|
+
export declare const MobileHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
4
4
|
|
|
5
5
|
import styled, { css, keyframes } from 'styled-components';
|
|
6
|
-
import { BREAKPOINTS, COLORS, focusStyles, scrollBarStyling } from '../../styles';
|
|
6
|
+
import { BREAKPOINTS, COLORS, ComponentSStyling, focusStyles, scrollBarStyling, ParagraphXSStyling, ParagraphTextStyle } from '../../styles';
|
|
7
7
|
import { NavLink } from 'react-router-dom';
|
|
8
8
|
import { ComponentMStyling, ComponentTextStyle } from '../../styles';
|
|
9
9
|
import { Z_INDEXES } from '../../styles';
|
|
@@ -24,4 +24,7 @@ export var MenuLink = styled(NavLink)(_templateObject13 || (_templateObject13 =
|
|
|
24
24
|
export var flowDown = keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
25
25
|
export var MobileMenuWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n"])));
|
|
26
26
|
export var ScrollableContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ", "\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n"])), scrollBarStyling(Size.Small));
|
|
27
|
+
export var MobileHeaderText = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
|
|
28
|
+
export var MobileHeaderNote = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n word-break: break-all;\n ", "\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
|
|
29
|
+
export var MobileHeaderContainer = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n display: flex;\n flex-direction: column;\n"])), COLORS.neutral_200);
|
|
27
30
|
//# sourceMappingURL=CommonStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","focusStyles","scrollBarStyling","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","Size","RowLayout","div","Button","button","white","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","Small"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentSStyling","focusStyles","scrollBarStyling","ParagraphXSStyling","ParagraphTextStyle","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","Size","RowLayout","div","Button","button","white","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","Small","MobileHeaderText","Bold","MobileHeaderNote","MobileHeaderContainer","neutral_200"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,iBAA9B,EAAiDC,WAAjD,EAA8DC,gBAA9D,EAAgFC,kBAAhF,EAAoGC,kBAApG,QAA8H,cAA9H;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,cAAtD;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,IAAT,QAAqB,aAArB;AAEA,OAAO,IAAMC,SAAS,GAAGf,MAAM,CAACgB,GAAV,iHAAf;AAKP,OAAO,IAAMC,MAAM,GAAGjB,MAAM,CAACkB,MAAV,yIACGd,MAAM,CAACe,KADV,CAAZ;AAMP,IAAMC,QAAQ,GAAGlB,SAAH,sMAAd;AAWA,IAAMmB,SAAS,GAAGnB,SAAH,yPAAf;AAaA,OAAO,IAAMoB,OAAO,GAAGpB,SAAH,wLAAb;AAWP,OAAO,IAAMqB,MAAM,GAAGrB,SAAH,wLAAZ;AAWP,OAAO,IAAMsB,IAAI,GAAGxB,MAAM,CAACgB,GAAV,geAEKZ,MAAM,CAACe,KAFZ,EAOJN,SAAS,CAACY,UAPN,EAYbtB,WAAW,CAACuB,KAZC,EAmBAN,QAnBA,EAwBAC,SAxBA,CAAV;AA4BP,OAAO,IAAMM,KAAK,GAAG3B,MAAM,CAACgB,GAAV,iHAAX;AAKP,OAAO,IAAMY,QAAQ,GAAG5B,MAAM,CAAC6B,IAAV,yJACVzB,MAAM,CAAC0B,WADG,CAAd;AAOP,OAAO,IAAMC,WAAW,GAAG/B,MAAM,CAACgC,EAAV,oMAAjB;AAUP,OAAO,IAAMC,eAAe,GAAGjC,MAAM,CAACkC,EAAV,qOAArB;AAeP,OAAO,IAAMC,0BAA0B,GAAGlC,GAAH,qqBAMxBY,SAAS,CAACuB,KANc,EAOfhC,MAAM,CAACiC,UAPQ,EAUxBjC,MAAM,CAACkC,WAViB,EAcxBlC,MAAM,CAACkC,WAdiB,EAmBxBzB,SAAS,CAAC0B,KAnBc,EAqBjCjC,WArBiC,EA4BxBO,SAAS,CAAC2B,MA5Bc,EA6BrBpC,MAAM,CAACqC,WA7Bc,EAgCxBrC,MAAM,CAACsC,WAhCiB,EAoCxBtC,MAAM,CAACsC,WApCiB,EA0CxBtC,MAAM,CAACuC,WA1CiB,EA8CxBvC,MAAM,CAACuC,WA9CiB,EAiDfvC,MAAM,CAACwC,WAjDQ,CAAhC;AAqDP,OAAO,IAAMC,QAAQ,GAAG7C,MAAM,CAACU,OAAD,CAAT,8QAOjBC,iBAAiB,CAACC,kBAAkB,CAACkC,OAApB,EAA6B1C,MAAM,CAAC2C,KAApC,CAPA,CAAd;AAeP,OAAO,IAAMC,QAAQ,GAAG9C,SAAH,yMAAd;AAWP,OAAO,IAAM+C,iBAAiB,GAAGjD,MAAM,CAACgB,GAAV,+LAAvB;AASP,OAAO,IAAMkC,mBAAmB,GAAGlD,MAAM,CAACgB,GAAV,4TAY5BT,gBAAgB,CAACO,IAAI,CAACqC,KAAN,CAZY,CAAzB;AAmBP,OAAO,IAAMC,gBAAgB,GAAGpD,MAAM,CAACgB,GAAV,6GACzBX,iBAAiB,CAACO,kBAAkB,CAACyC,IAApB,EAA0BjD,MAAM,CAAC0B,WAAjC,CADQ,EAEzB3B,WAAW,CAACuB,KAFa,EAGvBf,iBAAiB,CAACC,kBAAkB,CAACyC,IAApB,EAA0BjD,MAAM,CAAC0B,WAAjC,CAHM,CAAtB;AAMP,OAAO,IAAMwB,gBAAgB,GAAGtD,MAAM,CAACgB,GAAV,8GAEzBR,kBAAkB,CAACC,kBAAkB,CAACqC,OAApB,EAA6B1C,MAAM,CAAC0B,WAApC,CAFO,CAAtB;AAKP,OAAO,IAAMyB,qBAAqB,GAAGvD,MAAM,CAACgB,GAAV,iOAILZ,MAAM,CAACoD,WAJF,CAA3B","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentSStyling, focusStyles, scrollBarStyling, ParagraphXSStyling, ParagraphTextStyle } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles';\nimport { Z_INDEXES } from '../../styles';\nimport { Size } from '../../types';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n transform: translateX(100%);\n }\n`;\n\nexport const fadeOut = keyframes`\n 0% {\n opacity: 1;\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const fadeIn = keyframes`\n 0% {\n opacity: 0;\n visibility: hidden;\n }\n to {\n opacity: 1;\n visibility: visible;\n }\n`;\n\nexport const Menu = styled.div`\n height: 100%;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n right: 0;\n top: 0;\n position: absolute;\n z-index: ${Z_INDEXES.off_canvas};\n align-items: center;\n\n width: 320px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n\n .open & {\n visibility: visible;\n display: flex;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n visibility: hidden;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n\n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li {\n position: relative;\n }\n\n li:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n\n a {\n color: ${COLORS.primary_600};\n }\n\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n\n ${focusStyles}\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n\n a {\n color: ${COLORS.primary_800};\n }\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n\n svg {\n color: ${COLORS.neutral_300};\n }\n\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const MobileMenuWrapper = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\nexport const ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n`;\n\nexport const MobileHeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nexport const MobileHeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const MobileHeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n"],"file":"CommonStyles.js"}
|
|
@@ -41,35 +41,29 @@ var _MobileActionContainer = require("./MobileActionContainer");
|
|
|
41
41
|
|
|
42
42
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
43
43
|
|
|
44
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9
|
|
44
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
45
45
|
|
|
46
46
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
47
47
|
|
|
48
48
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
49
49
|
|
|
50
|
-
var
|
|
50
|
+
var MenuItemsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
|
|
51
51
|
|
|
52
|
-
var
|
|
52
|
+
var MenuSectionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ", ";\n }\n"])), _styles.COLORS.neutral_200);
|
|
53
53
|
|
|
54
|
-
var
|
|
54
|
+
var MenuSectionHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ", ";\n\n ", "\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_500));
|
|
55
55
|
|
|
56
|
-
var
|
|
56
|
+
var MenuSectionList = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n"])));
|
|
57
57
|
|
|
58
|
-
var
|
|
58
|
+
var PinnedContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
|
|
59
59
|
|
|
60
|
-
var
|
|
60
|
+
var FooterText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
|
|
61
61
|
|
|
62
|
-
var
|
|
62
|
+
var FooterNote = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ParagraphSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
|
|
63
63
|
|
|
64
|
-
var
|
|
64
|
+
var FooterLink = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null));
|
|
65
65
|
|
|
66
|
-
var
|
|
67
|
-
|
|
68
|
-
var FooterNote = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ParagraphSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
|
|
69
|
-
|
|
70
|
-
var FooterLink = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null));
|
|
71
|
-
|
|
72
|
-
var FooterContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_20, _styles.BREAKPOINTS.SMALL);
|
|
66
|
+
var FooterContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_20, _styles.BREAKPOINTS.SMALL);
|
|
73
67
|
|
|
74
68
|
var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
75
69
|
var header = _ref.header,
|
|
@@ -147,10 +141,10 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
|
147
141
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.ScrollableContainer, {
|
|
148
142
|
ref: scrollContainerRef,
|
|
149
143
|
className: scrollable ? 'scrollable' : '',
|
|
150
|
-
children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
151
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
144
|
+
children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileHeaderContainer, {
|
|
145
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MobileHeaderText, {
|
|
152
146
|
children: header.header
|
|
153
|
-
}), header.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
147
|
+
}), header.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MobileHeaderNote, {
|
|
154
148
|
children: header.note
|
|
155
149
|
})]
|
|
156
150
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItemsContainer, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Size","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n const { navigate, isActiveRoute } = useNavigationHelper();\n\n const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight />}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}\n />\n );\n case 'item':\n default:\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}\n />\n );\n }\n };\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n )}\n <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </ScrollableContainer>\n {items?.some((a) => a.pinned) && (\n <PinnedContainer>\n <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </PinnedContainer>\n )}\n {footer && (\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link && (\n <FooterLink>\n <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n )}\n </FooterContainer>\n )}\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["MenuItemsContainer","styled","div","MenuSectionContainer","COLORS","neutral_200","MenuSectionHeader","neutral_20","ComponentTextStyle","Bold","neutral_500","MenuSectionList","PinnedContainer","FooterText","neutral_600","BREAKPOINTS","SMALL","FooterNote","ParagraphTextStyle","Regular","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Size","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n const { navigate, isActiveRoute } = useNavigationHelper();\n\n const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight />}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}\n />\n );\n case 'item':\n default:\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}\n />\n );\n }\n };\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <MobileHeaderContainer>\n <MobileHeaderText>{header.header}</MobileHeaderText>\n {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n </MobileHeaderContainer>\n )}\n <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </ScrollableContainer>\n {items?.some((a) => a.pinned) && (\n <PinnedContainer>\n <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </PinnedContainer>\n )}\n {footer && (\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link && (\n <FooterLink>\n <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n )}\n </FooterContainer>\n )}\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
|
|
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
import _pt from "prop-types";
|
|
5
5
|
|
|
6
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9
|
|
6
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
7
7
|
|
|
8
8
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
9
9
|
|
|
@@ -11,30 +11,27 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
11
11
|
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import styled from 'styled-components';
|
|
14
|
-
import { BREAKPOINTS, COLORS,
|
|
14
|
+
import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling } from '../../styles';
|
|
15
15
|
import { Size } from '../../types';
|
|
16
16
|
import { HyperLink } from '../../HyperLink';
|
|
17
17
|
import { useMediaQuery } from 'react-responsive';
|
|
18
18
|
import { useNavigationHelper } from '../../common/NavigationHelper';
|
|
19
19
|
import { MenuItem } from '../../MenuItem';
|
|
20
20
|
import { SystemIcons } from '../../icons';
|
|
21
|
-
import { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
|
|
21
|
+
import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
|
|
22
22
|
import { useScrollableContainer } from '../../common/ScrollableContainer';
|
|
23
23
|
import { MobileActionContainer } from './MobileActionContainer';
|
|
24
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
25
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var FooterNote = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
|
|
36
|
-
var FooterLink = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
|
|
37
|
-
var FooterContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
|
|
26
|
+
var MenuItemsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
|
|
27
|
+
var MenuSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ", ";\n }\n"])), COLORS.neutral_200);
|
|
28
|
+
var MenuSectionHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ", ";\n\n ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
|
|
29
|
+
var MenuSectionList = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
|
|
30
|
+
var PinnedContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
|
|
31
|
+
var FooterText = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
|
|
32
|
+
var FooterNote = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
|
|
33
|
+
var FooterLink = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
|
|
34
|
+
var FooterContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
|
|
38
35
|
|
|
39
36
|
var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
40
37
|
var header = _ref.header,
|
|
@@ -112,10 +109,10 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
|
|
|
112
109
|
children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
|
|
113
110
|
ref: scrollContainerRef,
|
|
114
111
|
className: scrollable ? 'scrollable' : '',
|
|
115
|
-
children: [!!header && /*#__PURE__*/_jsxs(
|
|
116
|
-
children: [/*#__PURE__*/_jsx(
|
|
112
|
+
children: [!!header && /*#__PURE__*/_jsxs(MobileHeaderContainer, {
|
|
113
|
+
children: [/*#__PURE__*/_jsx(MobileHeaderText, {
|
|
117
114
|
children: header.header
|
|
118
|
-
}), header.note && /*#__PURE__*/_jsx(
|
|
115
|
+
}), header.note && /*#__PURE__*/_jsx(MobileHeaderNote, {
|
|
119
116
|
children: header.note
|
|
120
117
|
})]
|
|
121
118
|
}), /*#__PURE__*/_jsx(MenuItemsContainer, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","Size","HyperLink","useMediaQuery","useNavigationHelper","MenuItem","SystemIcons","MobileMenuWrapper","ScrollableContainer","useScrollableContainer","MobileActionContainer","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n const { navigate, isActiveRoute } = useNavigationHelper();\n\n const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight />}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}\n />\n );\n case 'item':\n default:\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}\n />\n );\n }\n };\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n )}\n <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </ScrollableContainer>\n {items?.some((a) => a.pinned) && (\n <PinnedContainer>\n <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </PinnedContainer>\n )}\n {footer && (\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link && (\n <FooterLink>\n <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n )}\n </FooterContainer>\n )}\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","Size","HyperLink","useMediaQuery","useNavigationHelper","MenuItem","SystemIcons","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","useScrollableContainer","MobileActionContainer","MenuItemsContainer","div","MenuSectionContainer","neutral_200","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","PinnedContainer","FooterText","neutral_600","SMALL","FooterNote","Regular","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n const { navigate, isActiveRoute } = useNavigationHelper();\n\n const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight />}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}\n />\n );\n case 'item':\n default:\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}\n />\n );\n }\n };\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <MobileHeaderContainer>\n <MobileHeaderText>{header.header}</MobileHeaderText>\n {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n </MobileHeaderContainer>\n )}\n <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </ScrollableContainer>\n {items?.some((a) => a.pinned) && (\n <PinnedContainer>\n <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </PinnedContainer>\n )}\n {footer && (\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link && (\n <FooterLink>\n <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n )}\n </FooterContainer>\n )}\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
|
|
@@ -28,8 +28,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
28
28
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
29
29
|
|
|
30
30
|
var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
31
|
-
var
|
|
32
|
-
|
|
31
|
+
var children = _ref.children,
|
|
32
|
+
header = _ref.header,
|
|
33
|
+
action = _ref.action;
|
|
33
34
|
|
|
34
35
|
var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([children]),
|
|
35
36
|
_useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
|
|
@@ -37,10 +38,16 @@ var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
|
37
38
|
scrollable = _useScrollableContain2[1];
|
|
38
39
|
|
|
39
40
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
|
|
40
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.
|
|
41
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.ScrollableContainer, {
|
|
41
42
|
ref: scrollContainerRef,
|
|
42
43
|
className: scrollable ? 'scrollable' : '',
|
|
43
|
-
children:
|
|
44
|
+
children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileHeaderContainer, {
|
|
45
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MobileHeaderText, {
|
|
46
|
+
children: header.header
|
|
47
|
+
}), header.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MobileHeaderNote, {
|
|
48
|
+
children: header.note
|
|
49
|
+
})]
|
|
50
|
+
}), children]
|
|
44
51
|
}), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
|
|
45
52
|
});
|
|
46
53
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"names":["MobileCustomMenuContent","
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"names":["MobileCustomMenuContent","children","header","action","scrollContainerRef","scrollable","note"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAOO,IAAMA,uBAA8E,GAAG,SAAjFA,uBAAiF,OAAkC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;AAAA,MAArBC,MAAqB,QAArBA,MAAqB;AAAA,MAAbC,MAAa,QAAbA,MAAa;;AAC9H,8BAAyC,iDAAuB,CAACF,QAAD,CAAvB,CAAzC;AAAA;AAAA,MAAOG,kBAAP;AAAA,MAA2BC,UAA3B;;AAEA,sBACE,sBAAC,+BAAD;AAAA,4BACE,sBAAC,iCAAD;AAAqB,MAAA,GAAG,EAAED,kBAA1B;AAAqD,MAAA,SAAS,EAAEC,UAAU,GAAG,YAAH,GAAkB,EAA5F;AAAA,iBACG,CAAC,CAACH,MAAF,iBACC,sBAAC,mCAAD;AAAA,gCACE,qBAAC,8BAAD;AAAA,oBAAmBA,MAAM,CAACA;AAA1B,UADF,EAEGA,MAAM,CAACI,IAAP,iBAAe,qBAAC,8BAAD;AAAA,oBAAmBJ,MAAM,CAACI;AAA1B,UAFlB;AAAA,QAFJ,EAOGL,QAPH;AAAA,MADF,EAUGE,MAAM,iBAAI,qBAAC,4CAAD,oBAA2BA,MAA3B,EAVb;AAAA,IADF;AAcD,CAjBM","sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n header?: MenuGroupHeader;\n action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <MobileHeaderContainer>\n <MobileHeaderText>{header.header}</MobileHeaderText>\n {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n </MobileHeaderContainer>\n )}\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"file":"MobileCustomMenuContent.cjs"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { MenuButton } from '../GlobalNavigationBar';
|
|
2
|
+
import { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';
|
|
3
3
|
interface MobileCustomMenuContentProps {
|
|
4
|
+
header?: MenuGroupHeader;
|
|
4
5
|
action?: MenuButton;
|
|
5
6
|
}
|
|
6
7
|
export declare const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps>;
|
|
@@ -8,13 +8,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
8
8
|
|
|
9
9
|
import React from 'react';
|
|
10
10
|
import { useScrollableContainer } from '../common/ScrollableContainer';
|
|
11
|
-
import { MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';
|
|
11
|
+
import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';
|
|
12
12
|
import { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
15
|
export var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
16
|
-
var
|
|
17
|
-
|
|
16
|
+
var children = _ref.children,
|
|
17
|
+
header = _ref.header,
|
|
18
|
+
action = _ref.action;
|
|
18
19
|
|
|
19
20
|
var _useScrollableContain = useScrollableContainer([children]),
|
|
20
21
|
_useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
|
|
@@ -22,10 +23,16 @@ export var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
|
22
23
|
scrollable = _useScrollableContain2[1];
|
|
23
24
|
|
|
24
25
|
return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
|
|
25
|
-
children: [/*#__PURE__*/
|
|
26
|
+
children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
|
|
26
27
|
ref: scrollContainerRef,
|
|
27
28
|
className: scrollable ? 'scrollable' : '',
|
|
28
|
-
children:
|
|
29
|
+
children: [!!header && /*#__PURE__*/_jsxs(MobileHeaderContainer, {
|
|
30
|
+
children: [/*#__PURE__*/_jsx(MobileHeaderText, {
|
|
31
|
+
children: header.header
|
|
32
|
+
}), header.note && /*#__PURE__*/_jsx(MobileHeaderNote, {
|
|
33
|
+
children: header.note
|
|
34
|
+
})]
|
|
35
|
+
}), children]
|
|
29
36
|
}), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
|
|
30
37
|
});
|
|
31
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"names":["React","useScrollableContainer","MobileMenuWrapper","ScrollableContainer","MobileActionContainer","MobileCustomMenuContent","
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"names":["React","useScrollableContainer","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","MobileActionContainer","MobileCustomMenuContent","children","header","action","scrollContainerRef","scrollable","note"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,+BAAvC;AAEA,SAASC,qBAAT,EAAgCC,gBAAhC,EAAkDC,gBAAlD,EAAoEC,iBAApE,EAAuFC,mBAAvF,QAAkH,4CAAlH;AACA,SAASC,qBAAT,QAAsC,qDAAtC;;;AAOA,OAAO,IAAMC,uBAA8E,GAAG,SAAjFA,uBAAiF,OAAkC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;AAAA,MAArBC,MAAqB,QAArBA,MAAqB;AAAA,MAAbC,MAAa,QAAbA,MAAa;;AAC9H,8BAAyCV,sBAAsB,CAAC,CAACQ,QAAD,CAAD,CAA/D;AAAA;AAAA,MAAOG,kBAAP;AAAA,MAA2BC,UAA3B;;AAEA,sBACE,MAAC,iBAAD;AAAA,4BACE,MAAC,mBAAD;AAAqB,MAAA,GAAG,EAAED,kBAA1B;AAAqD,MAAA,SAAS,EAAEC,UAAU,GAAG,YAAH,GAAkB,EAA5F;AAAA,iBACG,CAAC,CAACH,MAAF,iBACC,MAAC,qBAAD;AAAA,gCACE,KAAC,gBAAD;AAAA,oBAAmBA,MAAM,CAACA;AAA1B,UADF,EAEGA,MAAM,CAACI,IAAP,iBAAe,KAAC,gBAAD;AAAA,oBAAmBJ,MAAM,CAACI;AAA1B,UAFlB;AAAA,QAFJ,EAOGL,QAPH;AAAA,MADF,EAUGE,MAAM,iBAAI,KAAC,qBAAD,oBAA2BA,MAA3B,EAVb;AAAA,IADF;AAcD,CAjBM","sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n header?: MenuGroupHeader;\n action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <MobileHeaderContainer>\n <MobileHeaderText>{header.header}</MobileHeaderText>\n {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n </MobileHeaderContainer>\n )}\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"file":"MobileCustomMenuContent.js"}
|
|
@@ -58,6 +58,10 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
|
|
|
58
58
|
items: items,
|
|
59
59
|
action: footerAction
|
|
60
60
|
}), customContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileCustomMenuContent.MobileCustomMenuContent, {
|
|
61
|
+
header: {
|
|
62
|
+
header: header,
|
|
63
|
+
note: note
|
|
64
|
+
},
|
|
61
65
|
action: footerAction,
|
|
62
66
|
children: customContent
|
|
63
67
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","customContent","items","footerAction"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,qQAEAC,kBAAUC,UAFV,EAUTC,oBAAYC,KAVH,CAAb;;AAyBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAqF;AAAA,MAAlFC,KAAkF,QAAlFA,KAAkF;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,IAAmE,QAAnEA,IAAmE;AAAA,MAA7DC,WAA6D,QAA7DA,WAA6D;AAAA,MAAhDC,aAAgD,QAAhDA,aAAgD;AAAA,MAAjCC,KAAiC,QAAjCA,KAAiC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AAC9G,sBACE,sBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,qBAAC,yBAAD;AAAkB,MAAA,QAAQ,EAAEH,WAA5B;AAAyC,MAAA,KAAK,EAAEH,KAAhD;AAAuD,MAAA,OAAO,EAAEG;AAAhE,MADF,EAEGE,KAAK,iBAAI,qBAAC,0BAAD;AAAmB,MAAA,MAAM,EAAE;AAAEJ,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAA3B;AAA6C,MAAA,KAAK,EAAEG,KAApD;AAA2D,MAAA,MAAM,EAAEC;AAAnE,MAFZ,EAGGF,aAAa,
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","customContent","items","footerAction"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,qQAEAC,kBAAUC,UAFV,EAUTC,oBAAYC,KAVH,CAAb;;AAyBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAqF;AAAA,MAAlFC,KAAkF,QAAlFA,KAAkF;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,IAAmE,QAAnEA,IAAmE;AAAA,MAA7DC,WAA6D,QAA7DA,WAA6D;AAAA,MAAhDC,aAAgD,QAAhDA,aAAgD;AAAA,MAAjCC,KAAiC,QAAjCA,KAAiC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AAC9G,sBACE,sBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,qBAAC,yBAAD;AAAkB,MAAA,QAAQ,EAAEH,WAA5B;AAAyC,MAAA,KAAK,EAAEH,KAAhD;AAAuD,MAAA,OAAO,EAAEG;AAAhE,MADF,EAEGE,KAAK,iBAAI,qBAAC,0BAAD;AAAmB,MAAA,MAAM,EAAE;AAAEJ,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAA3B;AAA6C,MAAA,KAAK,EAAEG,KAApD;AAA2D,MAAA,MAAM,EAAEC;AAAnE,MAFZ,EAGGF,aAAa,iBACZ,qBAAC,gDAAD;AAAyB,MAAA,MAAM,EAAE;AAAEH,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAAjC;AAAmD,MAAA,MAAM,EAAEI,YAA3D;AAAA,gBACGF;AADH,MAJJ;AAAA,IADF;AAWD,CAZD;;;AATEJ,EAAAA,K;AACAC,EAAAA,M;AACAC,EAAAA,I;AACAC,EAAAA,W;AACAE,EAAAA,K;AAEAD,EAAAA,a;;eAiBaL,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Z_INDEXES } from '../styles';\nimport { MenuButton, MenuNavigationItemTypeItem } from '../GlobalNavigationBar';\nimport MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';\nimport MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';\nimport { MobileCustomMenuContent } from './MobileCustomMenuContent';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\ninterface Props {\n label: string;\n header: string;\n note?: string;\n onMenuClose: () => void;\n items?: MenuNavigationItemTypeItem[];\n footerAction?: MenuButton;\n customContent?: React.ReactNode;\n}\n\nconst MobileSwitcherMenu = ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => {\n return (\n <Wrapper role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MobileMenuHeader onGoBack={onMenuClose} label={label} onClose={onMenuClose} />\n {items && <MobileMenuContent header={{ header, note }} items={items} action={footerAction} />}\n {customContent && (\n <MobileCustomMenuContent header={{ header, note }} action={footerAction}>\n {customContent}\n </MobileCustomMenuContent>\n )}\n </Wrapper>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}
|
|
@@ -37,6 +37,10 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
|
|
|
37
37
|
items: items,
|
|
38
38
|
action: footerAction
|
|
39
39
|
}), customContent && /*#__PURE__*/_jsx(MobileCustomMenuContent, {
|
|
40
|
+
header: {
|
|
41
|
+
header: header,
|
|
42
|
+
note: note
|
|
43
|
+
},
|
|
40
44
|
action: footerAction,
|
|
41
45
|
children: customContent
|
|
42
46
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","Z_INDEXES","MobileMenuHeader","MobileMenuContent","MobileCustomMenuContent","Wrapper","div","off_canvas","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","customContent","items","footerAction"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,QAA4B,WAA5B;AACA,SAASC,SAAT,QAA0B,WAA1B;AAEA,OAAOC,gBAAP,MAA6B,gDAA7B;AACA,OAAOC,iBAAP,MAA8B,iDAA9B;AACA,SAASC,uBAAT,QAAwC,2BAAxC;;;AAEA,IAAMC,OAAO,GAAGN,MAAM,CAACO,GAAV,uPAEAL,SAAS,CAACM,UAFV,EAUTP,WAAW,CAACQ,KAVH,CAAb;;AAyBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAqF;AAAA,MAAlFC,KAAkF,QAAlFA,KAAkF;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,IAAmE,QAAnEA,IAAmE;AAAA,MAA7DC,WAA6D,QAA7DA,WAA6D;AAAA,MAAhDC,aAAgD,QAAhDA,aAAgD;AAAA,MAAjCC,KAAiC,QAAjCA,KAAiC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AAC9G,sBACE,MAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,KAAC,gBAAD;AAAkB,MAAA,QAAQ,EAAEH,WAA5B;AAAyC,MAAA,KAAK,EAAEH,KAAhD;AAAuD,MAAA,OAAO,EAAEG;AAAhE,MADF,EAEGE,KAAK,iBAAI,KAAC,iBAAD;AAAmB,MAAA,MAAM,EAAE;AAAEJ,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAA3B;AAA6C,MAAA,KAAK,EAAEG,KAApD;AAA2D,MAAA,MAAM,EAAEC;AAAnE,MAFZ,EAGGF,aAAa,
|
|
1
|
+
{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","Z_INDEXES","MobileMenuHeader","MobileMenuContent","MobileCustomMenuContent","Wrapper","div","off_canvas","SMALL","MobileSwitcherMenu","label","header","note","onMenuClose","customContent","items","footerAction"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,QAA4B,WAA5B;AACA,SAASC,SAAT,QAA0B,WAA1B;AAEA,OAAOC,gBAAP,MAA6B,gDAA7B;AACA,OAAOC,iBAAP,MAA8B,iDAA9B;AACA,SAASC,uBAAT,QAAwC,2BAAxC;;;AAEA,IAAMC,OAAO,GAAGN,MAAM,CAACO,GAAV,uPAEAL,SAAS,CAACM,UAFV,EAUTP,WAAW,CAACQ,KAVH,CAAb;;AAyBA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAAqF;AAAA,MAAlFC,KAAkF,QAAlFA,KAAkF;AAAA,MAA3EC,MAA2E,QAA3EA,MAA2E;AAAA,MAAnEC,IAAmE,QAAnEA,IAAmE;AAAA,MAA7DC,WAA6D,QAA7DA,WAA6D;AAAA,MAAhDC,aAAgD,QAAhDA,aAAgD;AAAA,MAAjCC,KAAiC,QAAjCA,KAAiC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AAC9G,sBACE,MAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,uBAAgB,gBAArC;AAAA,4BACE,KAAC,gBAAD;AAAkB,MAAA,QAAQ,EAAEH,WAA5B;AAAyC,MAAA,KAAK,EAAEH,KAAhD;AAAuD,MAAA,OAAO,EAAEG;AAAhE,MADF,EAEGE,KAAK,iBAAI,KAAC,iBAAD;AAAmB,MAAA,MAAM,EAAE;AAAEJ,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAA3B;AAA6C,MAAA,KAAK,EAAEG,KAApD;AAA2D,MAAA,MAAM,EAAEC;AAAnE,MAFZ,EAGGF,aAAa,iBACZ,KAAC,uBAAD;AAAyB,MAAA,MAAM,EAAE;AAAEH,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,IAAI,EAAJA;AAAV,OAAjC;AAAmD,MAAA,MAAM,EAAEI,YAA3D;AAAA,gBACGF;AADH,MAJJ;AAAA,IADF;AAWD,CAZD;;;AATEJ,EAAAA,K;AACAC,EAAAA,M;AACAC,EAAAA,I;AACAC,EAAAA,W;AACAE,EAAAA,K;AAEAD,EAAAA,a;;AAiBF,eAAeL,kBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Z_INDEXES } from '../styles';\nimport { MenuButton, MenuNavigationItemTypeItem } from '../GlobalNavigationBar';\nimport MobileMenuHeader from '../GlobalNavigationBar/mobile/MobileMenuHeader';\nimport MobileMenuContent from '../GlobalNavigationBar/mobile/MobileMenuContent';\nimport { MobileCustomMenuContent } from './MobileCustomMenuContent';\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\ninterface Props {\n label: string;\n header: string;\n note?: string;\n onMenuClose: () => void;\n items?: MenuNavigationItemTypeItem[];\n footerAction?: MenuButton;\n customContent?: React.ReactNode;\n}\n\nconst MobileSwitcherMenu = ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => {\n return (\n <Wrapper role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MobileMenuHeader onGoBack={onMenuClose} label={label} onClose={onMenuClose} />\n {items && <MobileMenuContent header={{ header, note }} items={items} action={footerAction} />}\n {customContent && (\n <MobileCustomMenuContent header={{ header, note }} action={footerAction}>\n {customContent}\n </MobileCustomMenuContent>\n )}\n </Wrapper>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
|