on handlers for a menu item\r\n * @function cmptMenuItem\r\n * @instance\r\n * @param {Element} domCmpt\r\n * @param {Element} domHandle\r\n * @param {Element} mItem\r\n */\r\nexport function cmptMenuItem(domCmpt, domHandle, domMenuList, domMenuItem) {\r\n\tdomMenuItem.find('[role=menuitem]').forEach(domMenuItemLink => {\r\n\t\tdomMenuItemLink.on('focus', evt => {\r\n\t\t\tdomMenuItemLink.attr('aria-selected', true);\r\n\t\t});\r\n\r\n\t\tdomMenuItemLink.on('blur', evt => {\r\n\t\t\tdomMenuItemLink.attr('aria-selected', false);\r\n\t\t});\r\n\t});\r\n\r\n\tdomMenuItem.on('keydown', evt => {\r\n\t\tlet prevDef = false;\r\n\r\n\t\tswitch(true) {\r\n\t\t\tcase keyPress.isTab(evt):\r\n\t\t\t\tbreak;\r\n\t\t\tcase keyPress.isLeft(evt):\r\n\t\t\tcase keyPress.isRight(evt):\r\n\t\t\t\tbreak;\r\n\t\t\tcase keyPress.isUp(evt):\r\n\t\t\tcase keyPress.isDown(evt):\r\n\t\t\t\tconst menuItemElems = Array.prototype.slice.call(domMenuList._.children);\r\n\t\t\t\tconst menuItemIdx = menuItemElems.indexOf(domMenuItem._);\r\n\t\t\t\tif (menuItemIdx === (keyPress.isUp(evt) ? 0 : menuItemElems.length - 1)) {\r\n\t\t\t\t\tprevDef = true;\r\n\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\t\t\t\tconst nextIdx = menuItemIdx + (keyPress.isUp(evt) ? -1 : 1);\r\n\t\t\t\tconst nextElem = menuItemElems[nextIdx].querySelector('[role=menuitem]');\r\n\t\t\t\tnextElem.focus();\r\n\t\t\t\tevt.stopPropagation(); // override up/down handling at the menu level\r\n\t\t\t\tprevDef = true;\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t\tif (prevDef) {\r\n\t\t\tevt.preventDefault();\r\n\t\t}\r\n\t});\r\n}\r\n\r\n/**\r\n * Sets up common on handlers for a menu\r\n * @function cmptMenu\r\n * @instance\r\n * @param {Element} domCmpt\r\n * @param {Element} domHandle\r\n * @param {Element} domMenu\r\n */\r\nexport function cmptMenu(domCmpt, domHandle, domMenu) {\r\n\tfunction onClick(evt) {\r\n\t\tconst isOpen = domHandle.hasClass('ss-menu-open');\r\n\t\tevents.emit(`sk-menu-${isOpen ? 'close' : 'open'}`, domCmpt, evt);\r\n\t}\r\n\r\n\tdomCmpt.on('click', function (evt) {\r\n\t\tif (!domCmpt.hasClass('sk-no-click')) { evt.stopPropagation(); }\r\n\t});\r\n\tdomHandle.on('click', onClick);\r\n\tdomHandle.on('keydown', (evt) => {\r\n\t\tlet prevDef = false;\r\n\t\tswitch (true) {\r\n\t\t\tcase keyPress.isEnter(evt):\r\n\t\t\tcase keyPress.isSpace(evt):\r\n\t\t\tcase keyPress.isDown(evt):\r\n\t\t\tcase keyPress.isUp(evt):\r\n\t\t\t\tonClick(evt);\r\n\t\t\t\tprevDef = true;\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t\tif (prevDef) {\r\n\t\t\tevt.preventDefault();\r\n\t\t}\r\n\t});\r\n\tdomMenu.attr('tabindex', '-1');\r\n\tdomMenu.on('keydown', (evt) => {\r\n\t\tlet prevDef = false;\r\n\t\tswitch (true) {\r\n\t\t\tcase keyPress.isDown(evt):\r\n\t\t\tcase keyPress.isUp(evt):\r\n\t\t\t\tdomMenu\r\n\t\t\t\t\t.find('[role=menuitem]')\r\n\t\t\t\t\t.forEach((mItem, idx, menuItems) => {\r\n\t\t\t\t\t\tconst focusIdx = keyPress.isUp(evt) ? menuItems.length - 1 : 0;\r\n\t\t\t\t\t\tconst focusOrBlur = idx === focusIdx ? 'focus' : 'blur';\r\n\t\t\t\t\t\tmItem._[focusOrBlur]();\r\n\t\t\t\t\t});\r\n\t\t\t\tbreak;\r\n\t\t\tcase keyPress.isEscape(evt):\r\n\t\t\t\tevents.emit('sk-menu-close', domCmpt);\r\n\t\t\t\tdomHandle._.focus();\r\n\t\t\t\tprevDef = true;\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t\tif (prevDef) {\r\n\t\t\tevt.preventDefault();\r\n\t\t}\r\n\t});\r\n\tdom.element(window).on('blur', function () {\r\n\t\tif (document.activeElement != null && document.activeElement.tagName === 'IFRAME') {\r\n\t\t\tevents.emit('sk-menu-close', domCmpt);\r\n\t\t}\r\n\t});\r\n\tdom.element(document).on('click', () => events.emit('sk-menu-close', domCmpt));\r\n\r\n\t// handle open events\r\n\tevents.on('sk-menu-open', function (cmpt, evt) {\r\n\t\tif (cmpt !== domCmpt) {\r\n\t\t\t// if this was an open event for another menu, close me\r\n\t\t\tevents.emit('sk-menu-close', domCmpt);\r\n\t\t} else {\r\n\t\t\t// this was an open event for me, open me\r\n\t\t\tdomHandle.addClass('ss-menu-open');\r\n\t\t\tdomHandle.attr('aria-pressed', 'true');\r\n\t\t\tdomMenu.addClass('ss-menu-open');\r\n\t\t\tdomMenu.attr('aria-hidden', 'false');\r\n\r\n\t\t\tif (keyPress.isDown(evt) || keyPress.isUp(evt)) {\r\n\t\t\t\t// focus the appropriate menu item (the first item by default, or the\r\n\t\t\t\t// last item if the 'up' keyCode was emitted)\r\n\t\t\t\tdomMenu\r\n\t\t\t\t\t.find('[role=menuitem]')\r\n\t\t\t\t\t.forEach((mItem, idx, menuItems) => {\r\n\t\t\t\t\t\tconst focusIdx = keyPress.isUp(evt) ? menuItems.length - 1 : 0;\r\n\t\t\t\t\t\tconst willFocus = idx === focusIdx;\r\n\t\t\t\t\t\tmItem._[willFocus ? 'focus' : 'blur']();\r\n\t\t\t\t\t});\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tdomMenu._.focus();\r\n\t\t}\r\n\t});\r\n\r\n\t// handle close events\r\n\tevents.on('sk-menu-close', function (cmpt, external = true) {\r\n\t\t// if this close event was for another menu, ignore\r\n\t\tif (cmpt !== domCmpt) { return; }\r\n\t\t// close the menu\r\n\t\tdomHandle.removeClass('ss-menu-open');\r\n\t\tdomHandle.attr('aria-pressed', 'false');\r\n\t\tdomMenu.removeClass('ss-menu-open');\r\n\t\tdomMenu.attr('aria-hidden', 'true');\r\n\r\n\t\tconst menuItems = domMenu.find('[role=menuitem]');\r\n\t\tmenuItems.map(mItem => mItem.attr('aria-selected', false));\r\n\t});\r\n}\r\n\r\n/**\r\n * handle the clear button functionality for an sk-input element\r\n * @function cmptInputClear\r\n * @instance\r\n * @param {Element} domInput\r\n * @param {Element} domClearBtn\r\n * @param {Boolean} clearOnEscape - Adds an event handler to run when you press escape\r\n */\r\nexport function cmptInputClear(domInput, domClearBtn, clearOnEscape) {\r\n\t// toggle sk-hidden based on the content\r\n\tconst toggleClear = () => {\r\n\t\tdomClearBtn.toggleClass('sk-hidden', !domInput._.value.length);\r\n\t};\r\n\r\n\tdomInput.on('input', toggleClear);\r\n\tdomClearBtn.on('click', clear);\r\n\tif (clearOnEscape) {\r\n\t\tdomInput.on('keydown', clearOnEscapeCall);\r\n\t}\r\n\r\n\ttoggleClear();\r\n\r\n\tfunction clear() {\r\n\t\tdomInput._.value = '';\r\n\t\tdomInput._.focus();\r\n\t\ttoggleClear();\r\n\t}\r\n\r\n\tfunction clearOnEscapeCall(evt) {\r\n\t\t// bail out if this was not the ESCAPE key\r\n\t\tif (!keyPress.isEscape(evt)) { return; }\r\n\r\n\t\tclear();\r\n\t}\r\n}\r\n\r\nexport const queryStringObject = function () {\r\n\tconst raw = window.location.search;\r\n\tif (raw.length === 0) { return {}; }\r\n\tconst rawArr = raw.slice(1).split('&');\r\n\treturn rawArr.reduce(function (o, qs) {\r\n\t\tconst [key, value] = qs.split('=');\r\n\t\to[decodeURIComponent(key)] = decodeURIComponent(value);\r\n\t\treturn o;\r\n\t}, {});\r\n};\r\n\r\n///////\r\n// calculating and distribute the top bar extra width\r\n// to dynamic width elements\r\n//\r\nvar activityIndicatorWidth = 0;\r\nvar impersonationMode = false;\r\nconst staticElems = {};\r\nconst dynamicElems = {};\r\nconst staticWidthElemNames = ['app-switcher', 'search', 'help', 'notifications'];\r\nconst impStaticWidthElemNames = ['app-switcher', 'search'];\r\nconst dynamicWidthElemNames = ['user-info', 'org-switcher'];\r\nconst impDynamicWidthElemNames = ['impersonated-user', 'org-switcher'];\r\n\r\n/**\r\n * cmptDynamicWidth - registers a header component that should be dynamic\r\n * width and occupy as much space (max-width) as possible\r\n *\r\n * @param {EasyDomElement} elem - the element that should be dynamic\r\n * @param {String} text - the dynamic text content to use for measurements\r\n * @param {Number} adjustment - the px amount to add to measurement to compensate for padding\r\n */\r\nexport const cmptDynamicWidth = function (name, elem, text, adjustment = 0, font = 'normal 15px') {\r\n\tconst firstRegistration = dynamicElems[name] == null;\r\n\tdynamicElems[name] = {elem, text, adjustment, font};\r\n\r\n\t// if this elem is the user-info component and this is the first\r\n\t// time we see it being registered. start watching for role data\r\n\tif (name === 'user-info' && firstRegistration) { watchForRoles(); }\r\n\r\n\t// update our size calculations\r\n\tadjustDynamicWidthElements();\r\n};\r\n\r\n// re-calculate the measurements because adjustments have been made\r\nfunction adjustDynamicWidthElements() {\r\n\t// decide what elements could be on the screen based on if we are impersonating\r\n\tconst _staticWidthElemNames = (impersonationMode ? impStaticWidthElemNames : staticWidthElemNames);\r\n\tconst _dynamicWidthElemNames = (impersonationMode ? impDynamicWidthElemNames : dynamicWidthElemNames);\r\n\r\n\t// calculate the total width of all static elements on the screen\r\n\t// give the header an extra 43 pixels for impersonation mode to accommodate the X\r\n\tconst _totalStaticWidth = _staticWidthElemNames.reduce(function (total, elName) {\r\n\t\tconst elWidth = staticElems[elName] && parseFloat(staticElems[elName].css('width'));\r\n\t\treturn total + (elWidth || 0);\r\n\t}, (impersonationMode ? 48 : 5));\r\n\r\n\t// figure out what dyamic elements are on screen currently\r\n\tconst _dynamicWidthElems = _dynamicWidthElemNames\r\n\t\t.filter(elName => dynamicElems[elName] != null)\r\n\t\t.map(elName => dynamicElems[elName])\r\n\t\t.map(e => Object.assign({}, e, {width: measureText(e.text, e.font)}));\r\n\r\n\t// calculate the total width of all dymanic elements based on their text width\r\n\tconst _totalDynamicWidth = _dynamicWidthElems.reduce((t, e) => t + (e.width + e.adjustment), 0);\r\n\r\n\t// apply the corrent percent width calculation for each dynamic element\r\n\t_dynamicWidthElems.forEach(function (e) {\r\n\t\tconst _staticWidth = _totalStaticWidth + activityIndicatorWidth;\r\n\t\tconst widthPercent = Math.floor(((e.width + e.adjustment)/_totalDynamicWidth) * 100);\r\n\t\tconst itemPxReductionAmt = _staticWidth * (widthPercent / 100);\r\n\t\te.elem.css('max-width', `calc(${widthPercent}% - ${itemPxReductionAmt}px)`);\r\n\t});\r\n}\r\n\r\nconst drawCtx = document.createElement('canvas').getContext('2d');\r\n// measure how many px this text will take up\r\nfunction measureText(text, font = 'normal 15px') {\r\n\tconst fontFamily = `'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif`;\r\n\tdrawCtx.font = `${font} ${fontFamily}`;\r\n\treturn drawCtx.measureText(text).width;\r\n}\r\n\r\n// if we switch to or from impersonation mode, we should recalculate header space\r\nevents.on('_header.impersonation', function (impMode) {\r\n\timpersonationMode = impMode;\r\n\tadjustDynamicWidthElements();\r\n});\r\n\r\n// the activity-indicator doesn't initially take up space, but it requires\r\n// space when it is shown. hook into the visible events and re-adjust if\r\n// if shows up on the scene.\r\nevents.on(`_activity-indicator-initialized`, function (elem) {\r\n\tevents.on(`activity-indicator.visible`, function (visible) {\r\n\t\tif (visible) {\r\n\t\t\tactivityIndicatorWidth = parseFloat(elem.css('width')) + parseFloat(elem.css('margin-right'));\r\n\t\t} else {\r\n\t\t\tactivityIndicatorWidth = 0;\r\n\t\t}\r\n\t\tadjustDynamicWidthElements();\r\n\t}, true);\r\n}, true);\r\n\r\n// if roles are filled, we need to make sure the role name is not longer\r\n// than the user's name, if it is, we need to use it for calculations instead\r\nfunction watchForRoles() {\r\n\tstore.onValue('roles', function (data) {\r\n\t\tconst roleName = data.roles.find(r => r.id === data.currentRole).name;\r\n\t\tconst userInfo = dynamicElems['user-info'];\r\n\t\tconst userNameWidth = measureText(userInfo.text, userInfo.font);\r\n\t\tconst roleFont = '600 13px';\r\n\t\tconst roleWidth = measureText(roleName, roleFont);\r\n\r\n\t\tif (roleWidth > userNameWidth) {\r\n\t\t\tuserInfo.text = roleName;\r\n\t\t\tuserInfo.font = roleFont;\r\n\t\t}\r\n\r\n\t\tadjustDynamicWidthElements();\r\n\t});\r\n}\r\n\r\n// listen to other header elements and readjust when they show up\r\nstaticWidthElemNames.forEach(function (name) {\r\n\tevents.on(`_${name}-initialized`, elem => addStaticWidthElem(name, elem), true);\r\n});\r\n\r\nfunction addStaticWidthElem(name, elem) {\r\n\tstaticElems[name] = elem;\r\n\tadjustDynamicWidthElements();\r\n}\r\n","import * as dom from '../../util/easy-dom';\r\nimport * as store from '../../util/store';\r\nimport { cmptMenu, cmptMenuItem } from '../../util/cmpt-common-features';\r\nimport * as events from '../../util/event-bus';\r\n\r\n/**\r\n * Displays articles, and helper blocks\r\n * @class Sidekick.Help\r\n * @memberOf Sidekick\r\n * @param {EasyDom} elem - Container {@link EasyDom} element\r\n * @param {Object} attrs\r\n * @param {Object} ctx\r\n * @param {Function} i18n - translation function\r\n * @emits header.help.article.click - Thrown when an article is clicked that doesn't have a url\r\n * @emits header.help.block.click - Thrown when an block is clicked that doesn't have a url\r\n * @example\r\n * articles: List of articles pertaining to the app\r\n * blocks: List of other links to different sections of the app.\r\n * title: Text to show the user\r\n * icon: Icon to show the user\r\n * url: Optional. If passed article/block will open a new window to that url. If omitted then\r\n * \theader.help.article.click/header.help.block.click will be thrown and the item will be the article/block. Extra\r\n * \tparams can optionally be added to the item when building the nav menu and they will be included back to you when the\r\n * \tnav item is clicked.\r\n * {\r\n\t'articles': [{\r\n\t\t'title': 'Getting Started with Frontline Central',\r\n\t\t'url': '/getting_started',\r\n\t\t'icon': 'file-text'\r\n\t}],\r\n\t'blocks': [{\r\n\t\t'title': 'Learn more about Frontline Central',\r\n\t\t'url': 'http://help1.frontlinek12.com/?b_id=13067',\r\n\t\t'icon': 'learning_center_logo'\r\n\t}]\r\n}\r\n */\r\nexport default function (elem, attrs, ctx, i18n) {\r\n\tconst { responsiveTopNav } = store.get('sk-config');\r\n\t/////\r\n\t// find dom elements that we care about\r\n\t//\r\n\tconst [domButton] = elem.find('.control');\r\n\tconst [domMenu] = elem.find('.menu');\r\n\tconst [domBlocks] = elem.find('.blocks');\r\n\tconst [domArticles] = elem.find('.articles');\r\n\tconst domButtonElements = document.querySelectorAll('.control');\r\n\tconst [domNavButton] = elem.find('.control-responsive');\r\n\tconst [domMenuMobile] = elem.find('.menu-mobile');\r\n\tconst [domBlocksMobile] = elem.find('.blocks-mobile');\r\n\tconst [domArticlesMobile] = elem.find('.articles-mobile');\r\n\r\n\tif (responsiveTopNav) {\r\n\t\tdomButtonElements.forEach((domButtonElement) => {\r\n\t\t\tdomButtonElement.classList.add('sk-help-responsive');\r\n\t\t});\r\n\r\n\t\tif (attrs.role === 'navitem') {\r\n\t\t\tdomNavButton.css('display', 'block');\r\n\t\t\tdomNavButton.on('click', (evt) => {\r\n\t\t\t\tevt.stopPropagation();\r\n\t\t\t\tevt.preventDefault();\r\n\t\t\t\tif (domMenuMobile.css('display') === 'none') {\r\n\t\t\t\t\tdomMenuMobile.css('display', 'block');\r\n\t\t\t\t} else {\r\n\t\t\t\t\tdomMenuMobile.css('display', 'none');\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\t// initialize with default values\r\n\tlet urlTemplateVars = getUrlTemplateVars();\r\n\r\n\t/////\r\n\t// handle initial state and data changes\r\n\t//\r\n\tupdateHelpData(ctx);\r\n\tstore.onValue('help', updateHelpData);\r\n\r\n\tstore.onValue('idm-data', (idmData) => {\r\n\t\turlTemplateVars = getUrlTemplateVars(idmData);\r\n\t\tupdateHelpData(ctx);\r\n\t});\r\n\r\n\t/////\r\n\t// listen for events and take action\r\n\t//\r\n\tcmptMenu(elem, domButton, domMenu);\r\n\r\n\t/////\r\n\t// helper functions\r\n\t//\r\n\t/**\r\n\t * Updates the display with the new data being passed in.\r\n\t * @param {Object} newCtx - New context object with the new data.\r\n\t */\r\n\tfunction updateHelpData(newCtx) {\r\n\t\t// update our context object\r\n\t\tif (ctx !== newCtx) {\r\n\t\t\tctx = newCtx;\r\n\t\t}\r\n\r\n\t\t// articles\r\n\t\tvar articles = ctx.articles;\r\n\t\tif (articles == null || articles.length === 0) {\r\n\t\t\t// no articles to display\r\n\t\t\tdomArticles.css('display', 'none');\r\n\t\t\tdomArticlesMobile.css('display', 'none');\r\n\t\t} else {\r\n\t\t\tdomArticles.css('display', 'block');\r\n\t\t\tdomArticlesMobile.css('display', 'block');\r\n\t\t\t// process the list of articles to display\r\n\t\t\t// max 3 articles\r\n\t\t\tconst articlesToDisplay = articles.slice(0, 3);\r\n\r\n\t\t\tdomArticles.children(\r\n\t\t\t\tarticlesToDisplay.map((article) =>\r\n\t\t\t\t\tcreateArticleElement(\r\n\t\t\t\t\t\tarticle,\r\n\t\t\t\t\t\turlTemplateVars,\r\n\t\t\t\t\t\telem,\r\n\t\t\t\t\t\tdomButton,\r\n\t\t\t\t\t\tdomArticles\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t\tdomArticlesMobile.children(\r\n\t\t\t\tarticlesToDisplay.map((article) =>\r\n\t\t\t\t\tcreateArticleElement(\r\n\t\t\t\t\t\tarticle,\r\n\t\t\t\t\t\turlTemplateVars,\r\n\t\t\t\t\t\telem,\r\n\t\t\t\t\t\tdomNavButton,\r\n\t\t\t\t\t\tdomArticles\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\t// blocks\r\n\t\tvar blocks = ctx.blocks;\r\n\t\tif (blocks == null || blocks.length === 0) {\r\n\t\t\tdomBlocks.css('display', 'none');\r\n\t\t\tdomBlocksMobile.css('display', 'none');\r\n\t\t} else {\r\n\t\t\tdomBlocks.css('display', 'block');\r\n\t\t\tdomBlocksMobile.css('display', 'block');\r\n\t\t\t// process the list of blocks to display\r\n\t\t\tdomBlocks.children(\r\n\t\t\t\tblocks.map((block) =>\r\n\t\t\t\t\tcreateMenuItem(block, elem, domButton, domBlocks)\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t\tdomBlocksMobile.children(\r\n\t\t\t\tblocks.map((block) =>\r\n\t\t\t\t\tcreateMenuItem(block, elem, domNavButton, domBlocks)\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Extract values for URL 'template' string from IDM data. Use default values if the data is not provided.\r\n\t * @param {Object} [idmData] - IDM data object\r\n\t * @param {Object} {idmData.userContext} IDM user context object\r\n\t * @param {Object} {idmData.product} IDM product object\r\n\t */\r\n\tfunction getUrlTemplateVars({ identities, userContext, product } = {}) {\r\n\t\t// these names must match the placeholders values in the URL, which we control\r\n\t\tconst idTypes =\r\n\t\t\t(product && product.AssociatedRoles.map((x) => x.Type)) || [];\r\n\t\tconst idRecord =\r\n\t\t\tArray.isArray(identities) &&\r\n\t\t\tidentities.find((id) => idTypes.includes(id.Type));\r\n\t\tconst userKey = (idRecord && idRecord.Id) || '';\r\n\t\tconst orgId = (userContext && userContext.OrganizationId) || '';\r\n\r\n\t\treturn { userKey, orgId };\r\n\t}\r\n\r\n\t/**\r\n\t * Creates an article element and appends it to the DOM.\r\n\t * @param {Object} article - The article object containing details like title, url, and icon.\r\n\t * @param {Object} urlTemplateVars - An object containing variables to be interpolated into the article URL.\r\n\t * @param {HTMLElement} elem - The DOM element to which the article element will be appended.\r\n\t * @param {HTMLElement} domButton - The DOM button element associated with the article.\r\n\t * @param {HTMLElement} domArticles - The DOM element containing the list of articles.\r\n\t * @returns {HTMLElement} The created article element.\r\n\t */\r\n\tfunction createArticleElement(\r\n\t\tarticle,\r\n\t\turlTemplateVars,\r\n\t\telem,\r\n\t\tdomButton,\r\n\t\tdomArticles\r\n\t) {\r\n\t\tlet el;\r\n\t\tif (article.url == null || article.url.length === 0) {\r\n\t\t\tel = dom.parse(\r\n\t\t\t\t`${i18n('viewing as')}
${ctx.firstName} ${ctx.lastName}
`;\nexport const loader = (ctx, attrs, i18n) => `${!!attrs.statusText ? `
${!!attrs.fill ? `` : ''}`;\nexport const nav = (ctx, attrs, i18n) => `${attrs.statusText}
` : ''}${ i18n('Navigation') }
`;\nexport const navItem = (ctx, attrs, i18n) => ` ${ctx.children && ctx.children.length ? `` : ''}`;\nexport const navItemMegaMenu = (ctx, attrs, i18n) => ``;\nexport const navItemSubmenu = (ctx, attrs, i18n) => `
`;\nexport const notifications = (ctx, attrs, i18n) => `${ctx.url == null ? `` : ` ` }${ctx.url == null ? `` : ` ${i18n('Notifications')} ` }`;\nexport const orgSwitcher = (ctx, attrs, i18n) => ` `;\nexport const pickApp = (ctx, attrs, i18n) => `
${i18n('Select an Application')}
${i18n('Select an Organization')}
Load All
`;\nexport const pickOrgApp = (ctx, attrs, i18n) => ``;\nexport const search = (ctx, attrs, i18n) => `
${i18n('You will be signed out soon.')}
${i18n('Due to inactivity, your session will end and you will be signed out. Do you want to stay signed in?')}
${i18n('You have been signed out.')}
${i18n('For your security and protection of your data, you have been signed out due to inactivity.')}
Something went wrong.
We don’t know what happened but something went wrong. Please wait a few minutes then try to sign in again.
${i18n('You have no notifications')}
\r\n ${item.unread ? '' : ''}\r\n ${item.title}\r\n
\r\n${item.content}
\r\n ${item.timestamp ? `${item.timestamp}` : ''}\r\n \r\n \r\n - \r\n\t\t\t
${i18n('Contact Your Organization')}
\r\n\t\t\t- ${ctx.name} \r\n\t\t\t${ctx.contactName != null && ctx.contactName.length ? `
- ${ctx.contactName} ` : ''}\r\n\t\t\t${phones.length ? `
- ${phones} ` : ''}\r\n\t\t\t${ctx.email != null ? `
- ${ctx.email} ` : ''}\r\n\t\t\t${ctx.comments != null && ctx.comments.length ? `
- ${ctx.comments} ` : ''}\r\n\t\t