"use strict";var _jsxruntime = require("react/jsx-runtime");Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// Deree - Template/Playlist with Sidebar: page template generated by port/build-templates.mjs from port/templates.json // (Task 2.6). Edit those or port/components/*, then run the generator and port/compose.mjs; never edit here. var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _router = require('next/router'); var _xprapi = require('@/lib/xpr-api'); // @compose useXprLanguage function useXprLanguage() { const [lang, setLang] = _react.useState.call(void 0, null); _react.useEffect.call(void 0, () => { let alive = true; const w = window; // One /api/languages call per page, shared by every skin (the xprApi proxy allows 120/min/IP). w.__xprLanguages = w.__xprLanguages || _xprapi.xprApi.call(void 0, "/api/languages/?Active__eq=1&per_page=all"); w.__xprLanguages.then((res) => { const rows = _nullishCoalesce(_optionalChain([res, 'optionalAccess', _ => _._embedded, 'optionalAccess', _2 => _2.Language]), () => ( (Array.isArray(res) ? res : []))); const html = String(document.documentElement.lang || "").replace("-", "_").toLowerCase(); const hit = rows.find((l) => String(l.Locale || "").toLowerCase() === html) || rows.find((l) => html && String(l.IsoCode || "").toLowerCase() === html.slice(0, 2)) || rows.find((l) => l.Default) || rows[0] || null; if (alive) setLang(hit); }); return () => { alive = false; }; }, []); return lang; } // @end-compose useXprLanguage // @compose dereePage // Shared helpers for the Deree page templates and their chrome components (Task 2.6, PORT-PLAN §5.15). // Composed (port/compose.mjs) into every generated Deree - Template element before the components. // The localized section tree (the PageTemplate's `sitemap` prop) from its root to the section with this Id: // [root, …, section]. The root is the sitemap object itself (the domain section). [] when absent. function dereeSitemapPath(sitemap, id) { if (!sitemap || id == null) return []; const target = String(id); const walk = (node, trail) => { const next = [...trail, node]; if (String(_optionalChain([node, 'optionalAccess', _3 => _3.Id])) === target) return next; for (const child of _nullishCoalesce(_optionalChain([node, 'optionalAccess', _4 => _4._embedded, 'optionalAccess', _5 => _5.Children]), () => ( []))) { const hit = walk(child, next); if (hit) return hit; } return null; }; return _nullishCoalesce(walk(sitemap, []), () => ( [])); } // A section's page URL from its sitemap path: the slugs joined from the root (trailingSlash is on). function dereeSectionHref(path) { const slugs = (_nullishCoalesce(path, () => ( []))).slice(1).map((node) => _optionalChain([node, 'optionalAccess', _6 => _6.Slug])).filter(Boolean); return slugs.length ? `/${slugs.join("/")}/` : "/"; } // Listing or detail (PORT-PLAN §5.14). Legacy templates branched on urlParams.section_copy_id; on Xia a detail // URL is deeper than the section's own path. Returns { path, detail, slug }: the sitemap path of the section, // whether this is a detail URL, and its last segment (the article slug) when it is. function dereePageMode(sitemap, section, asPath) { const path = dereeSitemapPath(sitemap, _optionalChain([section, 'optionalAccess', _7 => _7.Id])); const decode = (s) => { try { return decodeURIComponent(s); } catch (e) { return s; } }; const segs = String(asPath || "/").split(/[?#]/)[0].split("/").filter(Boolean).map(decode); const lower = segs.map((s) => s.toLowerCase()); let end = -1; if (path.length) { const slugs = path.slice(1).map((node) => String(_nullishCoalesce(_optionalChain([node, 'optionalAccess', _8 => _8.Slug]), () => ( ""))).toLowerCase()); for (let i = 0; end === -1 && i + slugs.length <= lower.length; i++) { if (slugs.every((s, j) => s === lower[i + j])) end = i + slugs.length; } } if (end === -1 && _optionalChain([section, 'optionalAccess', _9 => _9.Slug])) { const k = lower.lastIndexOf(String(section.Slug).toLowerCase()); if (k !== -1) end = k + 1; } if (end === -1) end = path.length ? path.length - 1 : lower.length; const detail = segs.length > end; return { path, detail, slug: detail ? segs[segs.length - 1] : null }; } // The legacy body classes (PORT-PLAN §5.15): the template puts them on its wrapper div and, for `body.x` // selectors, on document.body while it is mounted. function useDereeBodyClasses(className) { _react.useEffect.call(void 0, () => { const list = String(className || "").split(/\s+/).filter(Boolean); list.forEach((c) => document.body.classList.add(c)); return () => list.forEach((c) => document.body.classList.remove(c)); }, [className]); } // Rows of a REST collection response ({ _embedded: { : [...] } }) or a bare array; [] otherwise. function dereeRows(res, entity) { if (Array.isArray(res)) return res; const embedded = _optionalChain([res, 'optionalAccess', _10 => _10._embedded]); if (!embedded) return []; if (entity && Array.isArray(embedded[entity])) return embedded[entity]; return _nullishCoalesce(Object.values(embedded).find(Array.isArray), () => ( [])); } // One xprApi request per URI per page, shared by every component that asks for it (the proxy allows // 120 requests/min/IP). A failed request (null) is not kept, so the next caller retries. function dereeApiOnce(uri) { const w = window; const cache = (w.__dereeApi = w.__dereeApi || {}); if (!cache[uri]) { cache[uri] = _xprapi.xprApi.call(void 0, uri).then((res) => { if (res == null) delete cache[uri]; return res; }); } return cache[uri]; } // Bootstrap modal behaviour as React state (PORT-PLAN §5.8). As with Bootstrap's data-api, any // [data-toggle="modal"] whose data-target (or href) resolves to the modal opens it; [data-dismiss="modal"] // inside it, a click on the modal outside its dialog and Escape close it. body.modal-open is set while it is // open (Bootstrap's scroll lock; the legacy CSS also drops .mm-slideout's z-index under it). function useDereeModal(modalRef) { const [open, setOpen] = _react.useState.call(void 0, false); _react.useEffect.call(void 0, () => { const onClick = (e) => { const node = e.target instanceof Element ? e.target : null; const trigger = _optionalChain([node, 'optionalAccess', _11 => _11.closest, 'call', _12 => _12('[data-toggle="modal"]')]); if (!trigger || !modalRef.current) return; let selector = trigger.getAttribute("data-target"); if (!selector || selector === "#") { const href = trigger.getAttribute("href"); selector = href && href !== "#" ? href.trim() : ""; } let target = null; try { target = selector ? document.querySelector(selector) : null; } catch (err) { target = null; } if (target !== modalRef.current) return; if (trigger.tagName === "A" || trigger.tagName === "AREA") e.preventDefault(); setOpen(true); }; document.addEventListener("click", onClick); return () => document.removeEventListener("click", onClick); }, []); _react.useEffect.call(void 0, () => { if (!open) return undefined; document.body.classList.add("modal-open"); const onKeyDown = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("keydown", onKeyDown); return () => { document.body.classList.remove("modal-open"); document.removeEventListener("keydown", onKeyDown); }; }, [open]); const onModalClick = (e) => { const dismiss = e.target instanceof Element && e.target.closest('[data-dismiss="modal"]'); if (e.target === e.currentTarget || dismiss) setOpen(false); }; return { open, onModalClick }; } // @end-compose dereePage // @compose useDereeNavigation // The main nav from the page template's `sitemap` prop (Xia support's pattern, 2 Nov 2026), built as support's // rewritten Playlist template builds it: the visible level-1 sections in sitemap order, the first four the main menu // and the rest but Legal (5412) the top bar, each with its visible children. Returns the shape of the legacy // MainMenu record's en half that Nav and MobileNav read: { Nav, Secondary }, items with Id, Name, CanonicalUrl (a // path) and _embedded.Children. Built from props, the first render is in the server HTML. // The prop names the menu's third level only around the current page (elsewhere bare Ids), so the dropdowns changed // from page to page; the user asked for the same levels on every page (2 Nov 2026). Until the prop carries them, the // browser fills them from support's existing gateway action getSitemap { deep: true } (the whole tree, about 330 KB), // keeps the visible part for the session (sessionStorage, 10 minutes) and rebuilds the menu from it. It always asks: // on deeper pages the prop leaves the other branches out instead of sending bare Ids. Until 2 Nov 2026 it read the legacy MainMenu record, which Expresia rewrites on // every section save. // Needs: nothing. function dereeNavNode(node) { if (!node || String(node.Status) === "0" || Number(node.Invisible)) return null; if (!node.CanonicalUrl) return null; const children = (_nullishCoalesce(_optionalChain([node, 'access', _13 => _13._embedded, 'optionalAccess', _14 => _14.Children]), () => ( []))).map(dereeNavNode).filter(Boolean); return { Id: node.Id, Name: node.Name, Title: node.Name, CanonicalUrl: String(node.CanonicalUrl).replace(/^https?:\/\/[^/]+/i, ""), _embedded: { Children: children }, }; } function dereeNavFromTree(tree) { const top = (_nullishCoalesce(_optionalChain([tree, 'optionalAccess', _15 => _15._embedded, 'optionalAccess', _16 => _16.Children]), () => ( []))).map(dereeNavNode).filter(Boolean); const rest = top.filter((n) => String(n.Id) !== "5412"); return { Nav: rest.slice(0, 4), Secondary: rest.slice(4) }; } // The fields the menu reads, for the session copy (the same shape support's Playlist template keeps). function dereeNavSlim(node) { return { Id: _optionalChain([node, 'optionalAccess', _17 => _17.Id]), Name: _optionalChain([node, 'optionalAccess', _18 => _18.Name]), Status: _optionalChain([node, 'optionalAccess', _19 => _19.Status]), Invisible: _optionalChain([node, 'optionalAccess', _20 => _20.Invisible]), CanonicalUrl: _optionalChain([node, 'optionalAccess', _21 => _21.CanonicalUrl]), _embedded: { Children: (_nullishCoalesce(_optionalChain([node, 'optionalAccess', _22 => _22._embedded, 'optionalAccess', _23 => _23.Children]), () => ( []))).map(dereeNavSlim) } }; } function useDereeNavigation(sitemap) { const [deep, setDeep] = _react.useState.call(void 0, null); const rootId = _optionalChain([sitemap, 'optionalAccess', _24 => _24.Id]); const locale = _optionalChain([sitemap, 'optionalAccess', _25 => _25._locale]) || "en_US"; _react.useEffect.call(void 0, () => { if (!rootId) return undefined; let alive = true; const key = `dereeNavTree:${rootId}:${locale}`; try { const kept = JSON.parse(window.sessionStorage.getItem(key) || "null"); if (_optionalChain([kept, 'optionalAccess', _26 => _26.tree]) && Date.now() - kept.at < 600000) { setDeep(kept.tree); return undefined; } } catch (e) { // no session copy } const w = window; w.__dereeNavTree = w.__dereeNavTree || {}; if (!w.__dereeNavTree[key]) { w.__dereeNavTree[key] = _xprapi.xprAction.call(void 0, "getSitemap", { deep: true, sectionId: rootId, locale }).then((full) => { const visible = (_nullishCoalesce(_optionalChain([full, 'optionalAccess', _27 => _27._embedded, 'optionalAccess', _28 => _28.Children]), () => ( []))).filter((t) => String(_optionalChain([t, 'optionalAccess', _29 => _29.Status])) !== "0" && !Number(_optionalChain([t, 'optionalAccess', _30 => _30.Invisible]))); if (!visible.length) return null; const tree = { _embedded: { Children: visible.map(dereeNavSlim) } }; try { window.sessionStorage.setItem(key, JSON.stringify({ at: Date.now(), tree })); } catch (e) { // storage full or blocked: the menu still uses this page's copy } return tree; }).catch(() => null); } w.__dereeNavTree[key].then((tree) => { if (alive && tree) setDeep(tree); }); return () => { alive = false; }; }, [rootId, locale]); return dereeNavFromTree(_nullishCoalesce(deep, () => ( sitemap))); } // @end-compose useDereeNavigation // @compose MobileNav // Chrome component (Task 2.6): Deree - Global/Mobile Nav as the legacy page showed it, i.e. after mmenu.js v8 // (bundled in app-min.js, started by Control.js with extensions position-bottom + fullscreen and a top navbar // of "prev" + "title") had turned its nested list into panels. The markup, classes and their sequencing were // measured by running that mmenu build on this list. Data: Navigation (useDereeNavigation). Behaviour as React // state: a[href="#mobileMenu"] opens the menu, the blocker's a[href="#mm-0"] closes it, panel links slide // between panels; body and page classes as mmenu set them. // Needs: useDereeNavigation, dereePage; `sitemap` from the page template. function MobileNav({ lang, sitemap }) { const Navigation = useDereeNavigation(sitemap); const kids = (node) => { const list = _optionalChain([node, 'optionalAccess', _31 => _31._embedded, 'optionalAccess', _32 => _32.Children]); return Array.isArray(list) && list.length ? list : null; // a Handlebars #if is false for an empty list }; // Panels, numbered depth-first as mmenu numbered them (the page is mm-0, the top list mm-1). const panels = [{ id: "mm-1", parent: null, node: null, listClass: "", kind: "root", items: [] }]; let nextId = 2; const addPanel = (parent, node, listClass, kind) => { const panel = { id: `mm-${nextId++}`, parent, node, listClass, kind, items: [] }; panels.push(panel); return panel; }; for (const n of _nullishCoalesce(_optionalChain([Navigation, 'optionalAccess', _33 => _33.Nav]), () => ( []))) { if (kids(n)) { const panel = addPanel("mm-1", n, "", "nav"); panels[0].items.push({ kind: "next", node: n, panel: panel.id, liClass: "" }); for (const c of kids(n)) { if (kids(c)) { const inner = addPanel(panel.id, c, "", "navChild"); panel.items.push({ kind: "next", node: c, panel: inner.id, liClass: "" }); } else { panel.items.push({ kind: "link", node: c }); } } } else { panels[0].items.push({ kind: "link", node: n }); } } for (const s of _nullishCoalesce(_optionalChain([Navigation, 'optionalAccess', _34 => _34.Secondary]), () => ( []))) { if (kids(s)) { const panel = addPanel("mm-1", s, "hasChildren extra pl-20", "secondary"); panels[0].items.push({ kind: "next", node: s, panel: panel.id, liClass: "hasSubmenu" }); } else { panels[0].items.push({ kind: "secondaryLink", node: s }); } } // Off-canvas state, as mmenu's open()/close(): mm-menu_opened plus the wrapper classes at once, then // mm-wrapper_opening after the 25ms opening interval; closing drops mm-wrapper_opening and the rest after // the 400ms transition (mmenu waited 1.1 × that when the page itself does not transition). const [menuOpened, setMenuOpened] = _react.useState.call(void 0, false); const [opening, setOpening] = _react.useState.call(void 0, false); const openedRef = _react.useRef.call(void 0, false); const timers = _react.useRef.call(void 0, []); const later = (fn, ms) => { timers.current.push(setTimeout(fn, ms)); }; const open = () => { if (openedRef.current) return; setMenuOpened(true); later(() => { openedRef.current = true; setOpening(true); }, 25); }; const close = () => { if (!openedRef.current) return; setOpening(false); later(() => { setMenuOpened(false); openedRef.current = false; }, 440); }; const api = _react.useRef.call(void 0, {}); api.current = { open, close }; _react.useEffect.call(void 0, () => { // mmenu init: the wrapper (body) gets mm-wrapper; the page gets mm-slideout and the id the blocker links to. document.body.classList.add("mm-wrapper"); const page = document.querySelector(".mm-page"); _optionalChain([page, 'optionalAccess', _35 => _35.classList, 'access', _36 => _36.add, 'call', _37 => _37("mm-slideout")]); const addedId = !!page && !page.id; if (addedId) page.id = "mm-0"; const onClick = (e) => { const link = e.target instanceof Element ? e.target.closest("a[href]") : null; const href = _optionalChain([link, 'optionalAccess', _38 => _38.getAttribute, 'call', _39 => _39("href")]); if (href === "#mobileMenu") { e.preventDefault(); api.current.open(); } else if (href === "#mm-0") { e.preventDefault(); api.current.close(); } }; document.addEventListener("click", onClick); return () => { document.removeEventListener("click", onClick); timers.current.forEach(clearTimeout); ["mm-wrapper", "mm-wrapper_opened", "mm-wrapper_blocking", "mm-wrapper_background", "mm-wrapper_opening"].forEach((c) => document.body.classList.remove(c)); _optionalChain([page, 'optionalAccess', _40 => _40.classList, 'access', _41 => _41.remove, 'call', _42 => _42("mm-slideout")]); if (addedId) page.removeAttribute("id"); }; }, []); _react.useEffect.call(void 0, () => { ["mm-wrapper_opened", "mm-wrapper_blocking", "mm-wrapper_background"].forEach((c) => document.body.classList.toggle(c, menuOpened)); }, [menuOpened]); _react.useEffect.call(void 0, () => { document.body.classList.toggle("mm-wrapper_opening", opening); }, [opening]); // Panel state, as mmenu's openPanel(): "start" un-hides the target; after the 25ms interval "moving" swaps // mm-panel_opened (the panel left behind is mm-panel_opened-parent going forward, mm-panel_highest going // back); after the 400ms transition "idle" hides the panel left behind. const [panelState, setPanelState] = _react.useState.call(void 0, { current: "mm-1", from: null, stage: "idle" }); const panelRef = _react.useRef.call(void 0, panelState); panelRef.current = panelState; const panelTimers = _react.useRef.call(void 0, []); _react.useEffect.call(void 0, () => () => panelTimers.current.forEach(clearTimeout), []); const openPanel = (target) => { const s = panelRef.current; if (target === s.current) return; panelTimers.current.forEach(clearTimeout); panelTimers.current = [ setTimeout(() => setPanelState((x) => ({ ...x, stage: "moving" })), 25), setTimeout(() => setPanelState((x) => ({ ...x, stage: "idle" })), 425), ]; setPanelState({ current: target, from: s.current, stage: "start" }); }; const go = (e, target) => { e.preventDefault(); openPanel(target); }; const parentOf = Object.fromEntries(panels.map((p) => [p.id, p.parent])); const ancestors = (id) => { const out = []; for (let p = parentOf[id]; p; p = parentOf[p]) out.push(p); return out; }; const current = parentOf[panelState.current] !== undefined ? panelState.current : "mm-1"; const from = panelState.from && parentOf[panelState.from] !== undefined ? panelState.from : null; const stage = from ? panelState.stage : "idle"; const above = ancestors(current); const back = !!from && ancestors(from).includes(current); const panelClass = (id) => { const opened = stage === "start" ? id === from : id === current; const openedParent = above.includes(id) || (stage === "start" && back && id === current) || (stage === "moving" && !back && id === from); const highest = stage === "moving" && (back ? id === from : id === current); const hidden = stage === "idle" ? id !== current : id !== current && id !== from; return { className: ["mm-panel", opened && "mm-panel_opened", openedParent && "mm-panel_opened-parent", highest && "mm-panel_highest", hidden && "mm-hidden"].filter(Boolean).join(" "), hidden, }; }; const shown = _nullishCoalesce(panels.find((p) => p.id === (stage === "start" ? from : current)), () => ( panels[0])); const renderItem = (item, i) => { const node = item.node; if (item.kind === "next") { return ( _jsxruntime.jsx.call(void 0, 'li', { className: [item.liClass, "mm-listitem"].filter(Boolean).join(" "), children: _jsxruntime.jsxs.call(void 0, 'a', { className: "mm-btn mm-btn_next mm-listitem__btn mm-listitem__text" , href: `#${item.panel}`, onClick: (e) => go(e, item.panel), children: [ _optionalChain([node, 'optionalAccess', _43 => _43.Name]) , _jsxruntime.jsx.call(void 0, 'span', { className: "mm-sronly", children: "Open submenu" }) ]}) }, item.panel) ); } if (item.kind === "secondaryLink") { return ( _jsxruntime.jsx.call(void 0, 'li', { className: "mm-listitem", children: _jsxruntime.jsx.call(void 0, 'a', { className: "toggle a mm-listitem__text" , href: _optionalChain([node, 'optionalAccess', _45 => _45.CanonicalUrl]), children: _optionalChain([node, 'optionalAccess', _46 => _46.Name]) }) }, _nullishCoalesce(_optionalChain([node, 'optionalAccess', _44 => _44.Id]), () => ( i))) ); } return ( _jsxruntime.jsx.call(void 0, 'li', { className: "mm-listitem", children: _jsxruntime.jsx.call(void 0, 'a', { href: _optionalChain([node, 'optionalAccess', _48 => _48.CanonicalUrl]), title: _optionalChain([node, 'optionalAccess', _49 => _49.Name]), className: "mm-listitem__text", children: _optionalChain([node, 'optionalAccess', _50 => _50.Name]) }) }, _nullishCoalesce(_optionalChain([node, 'optionalAccess', _47 => _47.Id]), () => ( i))) ); }; return ( _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsxs.call(void 0, 'nav', { id: "mobileMenu", className: ["mobileMenu mm-menu mm-menu_offcanvas mm-menu_position-bottom mm-menu_fullscreen", menuOpened && "mm-menu_opened"].filter(Boolean).join(" "), 'aria-hidden': menuOpened ? undefined : "true", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "mm-navbars_top", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "mm-navbar", children: [ shown.parent ? ( _jsxruntime.jsx.call(void 0, 'a', { className: "mm-btn mm-btn_prev mm-navbar__btn" , href: `#${shown.parent}`, 'aria-owns': shown.parent, onClick: (e) => go(e, shown.parent), children: _jsxruntime.jsx.call(void 0, 'span', { className: "mm-sronly", children: "Close submenu" }) }) ) : ( _jsxruntime.jsx.call(void 0, 'a', { className: "mm-btn mm-btn_prev mm-navbar__btn mm-hidden" , 'aria-hidden': "true",}) ) , shown.parent ? ( _jsxruntime.jsx.call(void 0, 'a', { className: "mm-navbar__title", href: `#${shown.parent}`, 'aria-hidden': "true", onClick: (e) => go(e, shown.parent), children: _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([shown, 'access', _51 => _51.node, 'optionalAccess', _52 => _52.Name])}) }) ) : ( _jsxruntime.jsx.call(void 0, 'a', { className: "mm-navbar__title", children: _jsxruntime.jsx.call(void 0, 'span', { children: "Menu"}) }) ) ]}) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "mm-panels", children: panels.map((p) => { const state = panelClass(p.id); return ( _jsxruntime.jsxs.call(void 0, 'div', { id: p.id, className: state.className, 'aria-hidden': state.hidden ? "true" : undefined, children: [ _jsxruntime.jsxs.call(void 0, 'div', { className: "mm-navbar mm-navbar_sticky mm-hidden" , 'aria-hidden': "true", children: [ p.parent && ( _jsxruntime.jsx.call(void 0, 'a', { className: "mm-btn mm-btn_prev mm-navbar__btn" , href: `#${p.parent}`, onClick: (e) => go(e, p.parent), children: _jsxruntime.jsx.call(void 0, 'span', { className: "mm-sronly", children: "Close submenu" }) }) ) , p.parent ? ( _jsxruntime.jsx.call(void 0, 'a', { className: "mm-navbar__title", href: `#${p.parent}`, 'aria-hidden': "true", onClick: (e) => go(e, p.parent), children: _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([p, 'access', _53 => _53.node, 'optionalAccess', _54 => _54.Name])}) }) ) : ( _jsxruntime.jsx.call(void 0, 'a', { className: "mm-navbar__title", children: _jsxruntime.jsx.call(void 0, 'span', { children: "Menu"}) }) ) ]}) , _jsxruntime.jsxs.call(void 0, 'ul', { className: [p.listClass, "mm-listview"].filter(Boolean).join(" "), children: [ p.kind === "navChild" && _optionalChain([p, 'access', _55 => _55.node, 'optionalAccess', _56 => _56.hasLanding]) && ( _jsxruntime.jsx.call(void 0, 'li', { className: "mm-listitem", children: _jsxruntime.jsx.call(void 0, 'a', { href: _optionalChain([p, 'access', _57 => _57.node, 'optionalAccess', _58 => _58.CanonicalUrl]), title: "Overview", className: "mm-listitem__text", children: "Overview" }) }) ) , p.kind === "navChild" && (_nullishCoalesce(_optionalChain([p, 'access', _59 => _59.node, 'optionalAccess', _60 => _60._embedded, 'optionalAccess', _61 => _61.Children]), () => ( []))).map((g, i) => ( _jsxruntime.jsx.call(void 0, 'li', { className: "mm-listitem", children: _jsxruntime.jsx.call(void 0, 'a', { href: _optionalChain([g, 'optionalAccess', _63 => _63.CanonicalUrl]), title: _optionalChain([g, 'optionalAccess', _64 => _64.Name]), className: "mm-listitem__text", children: _optionalChain([g, 'optionalAccess', _65 => _65.Name]) }) }, _nullishCoalesce(_optionalChain([g, 'optionalAccess', _62 => _62.Id]), () => ( i))) )) , p.kind === "secondary" && (_nullishCoalesce(_optionalChain([p, 'access', _66 => _66.node, 'optionalAccess', _67 => _67._embedded, 'optionalAccess', _68 => _68.Children]), () => ( []))).map((c, i) => ( _jsxruntime.jsx.call(void 0, 'li', { className: "mm-listitem", children: _jsxruntime.jsx.call(void 0, 'a', { className: "active mm-listitem__text" , href: _optionalChain([c, 'optionalAccess', _70 => _70.CanonicalUrl]), children: _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([c, 'optionalAccess', _71 => _71.Name])}) }) }, _nullishCoalesce(_optionalChain([c, 'optionalAccess', _69 => _69.Id]), () => ( i))) )) , p.items.map(renderItem) ]}) ]}, p.id) ); }) }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "mm-wrapper__blocker mm-slideout" , children: _jsxruntime.jsx.call(void 0, 'a', { href: "#mm-0", children: _jsxruntime.jsx.call(void 0, 'span', { className: "mm-sronly", children: "Close menu" }) }) }) ]}) ); } // @end-compose MobileNav // @compose Nav // Chrome component (Task 2.6): Deree - Global/Nav, with what it included — Deree - Skins/Nav Feature in the // menu flyout (NavFeatureColumn) and Deree - Global/Search Results in the search flyout. Same markup and class // names. Data: Navigation via useDereeNavigation; FindCourse, NavFeature, HomepageEvents via xprApi // (PORT-PLAN §5.11); the search runs SSJS "Search Results Deree New" in the browser on /api/custom/SearchHelper/. // Behaviour (§5.8) as React state toggling the classes the legacy scripts toggled: menus.js (MainMenu, // courseMainMenu, searchMainMenu, searchFocus/searchBlur), overwrites.js (mainMenuToggles, searchTrigger), // Control.js (flyout sub menus, js-scrolled) and app-min.js (the #menuHandler height on resize). // Needs: useDereeNavigation, dereePage; `lang` from useXprLanguage, `sitemap` from the page template. // overwrites.js mainMenuToggles: every flyout column but the chosen one gets cssText "height:0;overflow:hidden;margin:0;". const NAV_FLYOUT_COLLAPSED = { height: 0, overflow: "hidden", margin: 0 }; // PORT-PLAN §5.3 xprDate (PHP date() letters), for the Nav Feature event date. const NAV_MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const NAV_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; function navXprDate(value, format) { const m = String(_nullishCoalesce(value, () => ( ""))).match(/^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?/); if (!m) return ""; const [, Y, mo, d, H = "00", i = "00", s = "00"] = m; const day = Number(d), month = Number(mo) - 1, hour = Number(H); const dow = new Date(Date.UTC(Number(Y), month, day)).getUTCDay(); const suffix = day % 10 === 1 && day !== 11 ? "st" : day % 10 === 2 && day !== 12 ? "nd" : day % 10 === 3 && day !== 13 ? "rd" : "th"; const map = { d, j: String(day), S: suffix, D: NAV_DAYS[dow].slice(0, 3), l: NAV_DAYS[dow], F: NAV_MONTHS[month], M: NAV_MONTHS[month].slice(0, 3), m: mo, n: String(month + 1), Y, y: Y.slice(2), H, G: String(hour), h: String(hour % 12 || 12).padStart(2, "0"), g: String(hour % 12 || 12), i, s, A: hour < 12 ? "AM" : "PM", a: hour < 12 ? "am" : "pm", }; return format.replace(/\\?([a-zA-Z])/g, (t, c) => (t[0] === "\\" ? c : _nullishCoalesce(map[c], () => ( c)))); } // SSJS "Search Results Deree New" (getSearchRecord): a SearchHelper record keeps one JSON document split over // Data1…Data8; returns the parsed hash map (title → item). function navSearchRecord(res) { const row = dereeRows(res)[0]; if (!row) return {}; let json = _nullishCoalesce(row.Data1, () => ( "")); if (json === "") return _nullishCoalesce(row.Data, () => ( {})); for (let i = 2; i < 9; i++) if (row[`Data${i}`]) json += row[`Data${i}`]; try { return _nullishCoalesce(JSON.parse(json), () => ( {})); } catch (e) { return {}; } } // SSJS "Search Results Deree New" (process): keys containing the query, playlists then sections then // articles, each URL once. function navSearchResults(responses, q) { const results = []; const added = new Set(); for (const res of responses) { const hashMap = navSearchRecord(res); for (const key in hashMap) { if (!Object.prototype.hasOwnProperty.call(hashMap, key) || !key.toLowerCase().includes(q)) continue; const item = hashMap[key]; const url = item && item.CanonicalUrl; if (url && !added.has(url)) { added.add(url); results.push({ key, value: item }); } } } return results; } // Deree - Skins/Nav Feature, as the Nav included it: the first playlist of section 5605 in the page language; // its ArticleStyle list option picks the next event (HomepageEvents) or the playlist's articles. function NavFeatureColumn({ lang }) { const [NavFeature, setNavFeature] = _react.useState.call(void 0, []); const [HomepageEvents, setHomepageEvents] = _react.useState.call(void 0, []); // harness-datasource: NavFeature = /api/playlists/?related_Section_Id__eq=5605 _react.useEffect.call(void 0, () => { if (!lang) return undefined; let alive = true; const q = new URLSearchParams({ related_Section_Id__eq: "5605", with: "CustomFields,PlaylistItems(Article(Categories,CustomFields,Language,Picture))", Locale__eq: String(_nullishCoalesce(lang.Locale, () => ( ""))), // was xpr.request.language.Locale per_page: "1", }); _xprapi.xprApi.call(void 0, `/api/playlists/?${q}`).then((res) => { if (alive) setNavFeature(dereeRows(res, "Playlist")); }); return () => { alive = false; }; }, [lang]); // Only an "Event" feature reads HomepageEvents, so it is fetched only then (the output is the same). const wantsEvents = NavFeature.some((pl) => String(_nullishCoalesce(_optionalChain([pl, 'optionalAccess', _72 => _72._embedded, 'optionalAccess', _73 => _73.CustomFields, 'optionalAccess', _74 => _74._embedded, 'optionalAccess', _75 => _75.ArticleStyle, 'optionalAccess', _76 => _76.Value]), () => ( ""))) === "Event"); // harness-datasource: HomepageEvents = /api/articles/?SectionId__eq=5174 _react.useEffect.call(void 0, () => { if (!lang || !wantsEvents) return undefined; let alive = true; const q = new URLSearchParams({ SectionId__eq: "5174", related_Language_Id__eq: String(_nullishCoalesce(lang.Id, () => ( ""))), // was xpr.request.language.Id Locale: String(_nullishCoalesce(lang.Locale, () => ( ""))), // was xpr.request.language.Locale Active__eq: "1", with: "CustomFields, Picture", order_field: "SortOrder", order_dir: "ASC", per_page: "all", }); _xprapi.xprApi.call(void 0, `/api/articles/?${q}`).then((res) => { if (alive) setHomepageEvents(dereeRows(res, "Article")); }); return () => { alive = false; }; }, [lang, wantsEvents]); const event = HomepageEvents[0]; return ( _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: NavFeature.map((pl, i) => { const style = String(_nullishCoalesce(_optionalChain([pl, 'optionalAccess', _77 => _77._embedded, 'optionalAccess', _78 => _78.CustomFields, 'optionalAccess', _79 => _79._embedded, 'optionalAccess', _80 => _80.ArticleStyle, 'optionalAccess', _81 => _81.Value]), () => ( ""))); return ( _jsxruntime.jsxs.call(void 0, 'div', { className: "column first" , children: [ style === "Event" && event && ( _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'a', { href: event.CanonicalUrl, className: "menuArticleLink", title: event.Title, children: event.Title }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "article", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "image", children: _optionalChain([event, 'access', _83 => _83._embedded, 'optionalAccess', _84 => _84.Picture, 'optionalAccess', _85 => _85.SourcePath]) && _jsxruntime.jsx.call(void 0, 'img', { src: event._embedded.Picture.SourcePath, alt: event._embedded.Picture.Description,} ) }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "content", children: [ _jsxruntime.jsxs.call(void 0, 'div', { className: "date", children: [ _jsxruntime.jsx.call(void 0, 'span', { className: "month", children: navXprDate(event.DisplayDate, "M")}) , _jsxruntime.jsx.call(void 0, 'span', { children: _jsxruntime.jsx.call(void 0, 'strong', { children: navXprDate(event.DisplayDate, "d")}) }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { className: "text", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "title mb-10" , children: event.Title}) , _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([event, 'access', _86 => _86._embedded, 'optionalAccess', _87 => _87.CustomFields, 'optionalAccess', _88 => _88.Duration])}) , _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([event, 'access', _89 => _89._embedded, 'optionalAccess', _90 => _90.CustomFields, 'optionalAccess', _91 => _91.Location])}) ]}) ]}) ]}) ]}) ) , style === "Article" && (_nullishCoalesce(_optionalChain([pl, 'optionalAccess', _92 => _92._embedded, 'optionalAccess', _93 => _93.PlaylistItems]), () => ( []))).map((item, j) => { const article = _optionalChain([item, 'optionalAccess', _94 => _94._embedded, 'optionalAccess', _95 => _95.Article]); if (!article) return null; const picture = _optionalChain([article, 'access', _96 => _96._embedded, 'optionalAccess', _97 => _97.Picture]); return ( _jsxruntime.jsxs.call(void 0, 'div', { className: "alsoRead " , id: "playlist-head-aside", children: [ _optionalChain([picture, 'optionalAccess', _98 => _98.SourcePath]) && _jsxruntime.jsx.call(void 0, 'img', { className: "lazy background-img" , src: picture.SourcePath, alt: _nullishCoalesce(picture.Description, () => ( "")), loading: "lazy",} ) , _jsxruntime.jsx.call(void 0, 'div', { className: "container inner" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "row", children: _jsxruntime.jsx.call(void 0, 'div', { className: "col", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "contentWrapper alsoReadText" , children: [ _jsxruntime.jsxs.call(void 0, 'div', { className: "textContent", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "html", children: _jsxruntime.jsx.call(void 0, 'p', { children: article.Description}) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "title", children: _jsxruntime.jsx.call(void 0, 'h3', { children: article.Title}) }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "btnContainer", children: _jsxruntime.jsxs.call(void 0, 'a', { title: "Placeholder Title" , href: _optionalChain([article, 'access', _99 => _99._embedded, 'optionalAccess', _100 => _100.CustomFields, 'optionalAccess', _101 => _101.ButtonLink]), className: "dereeMainButton alsoReadButton" , children: [ _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([article, 'access', _102 => _102._embedded, 'optionalAccess', _103 => _103.CustomFields, 'optionalAccess', _104 => _104.ButtonTitle])}) , _jsxruntime.jsx.call(void 0, 'div', { 'aria-hidden': "true", className: "icon-arrow-right",}) ]}) }) ]}) }) }) }) ]}, _nullishCoalesce(article.Id, () => ( j))) ); }) ]}, _nullishCoalesce(_optionalChain([pl, 'optionalAccess', _82 => _82.Id]), () => ( i))) ); }) }) ); } function Nav({ section, lang, sitemap }) { const Navigation = useDereeNavigation(sitemap); const kids = (node) => { const list = _optionalChain([node, 'optionalAccess', _105 => _105._embedded, 'optionalAccess', _106 => _106.Children]); return Array.isArray(list) && list.length ? list : null; // a Handlebars #if is false for an empty list }; // Datasource FindCourse (Deree - Global/DataSources/Find Course.json). const [FindCourse, setFindCourse] = _react.useState.call(void 0, []); // harness-datasource: FindCourse = /api/articles/?related_Section_Id__eq=5610 _react.useEffect.call(void 0, () => { let alive = true; const q = new URLSearchParams({ related_Section_Id__eq: "5610", with: "Section(CustomFields), CustomFields", Active__eq: "1", order_field: "SortOrder", order_dir: "ASC", }); _xprapi.xprApi.call(void 0, `/api/articles/?${q}`).then((res) => { if (alive) setFindCourse(dereeRows(res, "Article")); }); return () => { alive = false; }; }, []); // menus.js: three menus, each with its own visible flag and last clicked element, adding and removing // body classes exactly as their show()/hide() did (the flags are not kept in step with the classes, as in legacy). const [bodyFlags, setBodyFlags] = _react.useState.call(void 0, { mainMenu: false, search: false, course: false }); const menus = _react.useRef.call(void 0, { menuVisible: false, menuPrev: null, courseVisible: false, coursePrev: null, searchVisible: false, searchPrev: null }); const [courseButton, setCourseButton] = _react.useState.call(void 0, { open: false, cycled: false }); const [searchButton, setSearchButton] = _react.useState.call(void 0, { open: false, cycled: false }); _react.useEffect.call(void 0, () => { document.body.classList.toggle("js-mainMenuOpen", bodyFlags.mainMenu); document.body.classList.toggle("js-searchOpen", bodyFlags.search); document.body.classList.toggle("js-courseMenuOpen", bodyFlags.course); }, [bodyFlags]); // MainMenu: every link in .menuOuter .menu (main items and the mobile, search and course toggles). const mainMenuClick = (key) => { const m = menus.current; if (m.menuVisible) { if (key === m.menuPrev) setBodyFlags((b) => ({ ...b, mainMenu: false })); } else { setBodyFlags((b) => ({ ...b, search: false, mainMenu: true })); m.menuPrev = key; } m.menuVisible = !m.menuVisible; }; // courseMainMenu: .courseToggle a. const courseClick = (key) => { const m = menus.current; if (m.courseVisible) { if (key === m.coursePrev) { setBodyFlags((b) => ({ ...b, course: false })); setCourseButton((s) => ({ ...s, open: false })); } } else { setBodyFlags((b) => ({ ...b, course: true })); setCourseButton({ open: true, cycled: true }); m.coursePrev = key; } m.courseVisible = !m.courseVisible; }; // searchMainMenu: .searchToggle a. const searchClick = (key) => { const m = menus.current; if (m.searchVisible) { if (key === m.searchPrev) { setBodyFlags((b) => ({ ...b, search: false })); setSearchButton((s) => ({ ...s, open: false })); } } else { setBodyFlags((b) => ({ ...b, mainMenu: false, search: true })); setSearchButton({ open: true, cycled: true }); m.searchPrev = key; } m.searchVisible = !m.searchVisible; }; // .closeMenu .toggle. const closeMenuClick = (e) => { e.preventDefault(); setBodyFlags((b) => ({ ...b, mainMenu: false })); menus.current.menuVisible = false; }; // overwrites.js mainMenuToggles: a main item with a submenu opens its column in the flyout. const [activeColumn, setActiveColumn] = _react.useState.call(void 0, null); // Control.js: a flyout item with children toggles subMenu on its

, one at a time. const [openSub, setOpenSub] = _react.useState.call(void 0, null); const subMenuClick = (e, key) => { e.preventDefault(); e.stopPropagation(); setOpenSub((cur) => (cur === key ? null : key)); }; // Search flyout: menus.js searchFocus/searchBlur; overwrites.js searchTrigger → menuSearch → loadResults. const [searchThisOpen, setSearchThisOpen] = _react.useState.call(void 0, false); const [searchOuterOpen, setSearchOuterOpen] = _react.useState.call(void 0, false); const [loadMoreHidden, setLoadMoreHidden] = _react.useState.call(void 0, false); const [Results, setResults] = _react.useState.call(void 0, null); const searchInput = _react.useRef.call(void 0, null); const onSearchFormKeyPress = (e) => { if (e.key === "Enter") setLoadMoreHidden(true); // menuSearch(): $(".loadMore").hide() }; const onSearchSubmit = (e) => { e.preventDefault(); const q = String(_nullishCoalesce(_optionalChain([searchInput, 'access', _107 => _107.current, 'optionalAccess', _108 => _108.value]), () => ( ""))).toLowerCase(); if (!q) { setResults([]); // the SSJS returns nothing without a query return; } // harness-datasource: Results = /api/custom/SearchHelper/ Promise.all( ["pls", "sections", "articles"].map((resource) => _xprapi.xprApi.call(void 0, `/api/custom/SearchHelper/?${new URLSearchParams({ Resource__eq: resource, Status__eq: "1", Store__eq: "deree", per_page: "1" })}`), ), ).then((responses) => setResults(navSearchResults(responses, q))); }; _react.useEffect.call(void 0, () => { // menus.js: Escape hides each menu whose own flag says it is visible (the flags themselves stay as they are). const onKeyDown = (e) => { if (e.key !== "Escape") return; const m = menus.current; setBodyFlags((b) => ({ mainMenu: m.menuVisible ? false : b.mainMenu, search: m.searchVisible ? false : b.search, course: m.courseVisible ? false : b.course })); }; // Control.js (and app-min.js): body.js-scrolled past 80px, skipped while the body is position-locked. let previousScrolled = false; const onScroll = () => { if (document.body.style.top != 0) return; // legacy loose comparison: "" passes const scrolled = window.pageYOffset > 80; if (scrolled !== previousScrolled) document.body.classList.toggle("js-scrolled", scrolled); previousScrolled = scrolled; }; document.addEventListener("keydown", onKeyDown); window.addEventListener("scroll", onScroll); return () => { document.removeEventListener("keydown", onKeyDown); window.removeEventListener("scroll", onScroll); ["js-mainMenuOpen", "js-searchOpen", "js-courseMenuOpen", "js-scrolled"].forEach((c) => document.body.classList.remove(c)); }; }, []); // app-min.js: on resize, #menuHandler gets an inline height from the scroll position and the viewport width. const [menuHandlerStyle, setMenuHandlerStyle] = _react.useState.call(void 0, undefined); _react.useEffect.call(void 0, () => { const onResize = () => { const y = window.pageYOffset; const w = window.innerWidth; if (y > 250 && w > 1024) setMenuHandlerStyle({ height: "110px" }); // Past 250px below 1024px wide the legacy handler read an undefined global and threw: nothing changed. if (y < 250 && w > 1024) setMenuHandlerStyle({ height: "140px" }); if (y < 250 && w < 1024) setMenuHandlerStyle({ height: "60px" }); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); const isCurrent = (id) => String(_nullishCoalesce(_optionalChain([section, 'optionalAccess', _109 => _109.Id]), () => ( ""))) === String(_nullishCoalesce(id, () => ( ""))); return ( _jsxruntime.jsxs.call(void 0, 'div', { className: "menuOuter", id: "menuHandler", style: menuHandlerStyle, children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "flyout", children: _jsxruntime.jsx.call(void 0, 'div', { className: "wrapper", children: _jsxruntime.jsx.call(void 0, 'div', { className: "outer", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "inner", children: [ _jsxruntime.jsx.call(void 0, NavFeatureColumn, { lang: lang,} ) , _jsxruntime.jsx.call(void 0, 'div', { className: "scrollMenu", children: _jsxruntime.jsx.call(void 0, 'div', { className: "column third" , children: (_nullishCoalesce(_optionalChain([Navigation, 'optionalAccess', _110 => _110.Nav]), () => ( []))).map((n, i) => ( _jsxruntime.jsx.call(void 0, 'div', { id: `first-${_optionalChain([n, 'optionalAccess', _112 => _112.Id])}`, className: activeColumn === i ? "active" : undefined, style: activeColumn === i ? undefined : NAV_FLYOUT_COLLAPSED, children: _jsxruntime.jsx.call(void 0, 'ul', { className: "level-menu", children: (_nullishCoalesce(_optionalChain([n, 'optionalAccess', _113 => _113._embedded, 'optionalAccess', _114 => _114.Children]), () => ( []))).map((c, j) => kids(c) ? ( _jsxruntime.jsxs.call(void 0, 'li', { className: openSub === `${i}-${j}` ? "subMenu" : "", children: [ _jsxruntime.jsxs.call(void 0, 'a', { className: "js-first-level hasSubmenu toggle" , 'data-child-id': _optionalChain([c, 'optionalAccess', _116 => _116.Id]), href: "#", onClick: (e) => subMenuClick(e, `${i}-${j}`), children: [ _optionalChain([c, 'optionalAccess', _117 => _117.Name]) , _jsxruntime.jsx.call(void 0, 'div', { className: "ml-30 icon icon-chevron-down" ,}) ]}) , _jsxruntime.jsxs.call(void 0, 'ul', { className: "hasChildren extra pl-20" , children: [ _optionalChain([c, 'optionalAccess', _118 => _118.hasLanding]) && ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { href: _optionalChain([c, 'optionalAccess', _119 => _119.CanonicalUrl]), children: "Overview"}) }) ) , kids(c).map((g, k) => ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { className: "active", href: _optionalChain([g, 'optionalAccess', _121 => _121.CanonicalUrl]), children: _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([g, 'optionalAccess', _122 => _122.Name])}) }) }, _nullishCoalesce(_optionalChain([g, 'optionalAccess', _120 => _120.Id]), () => ( k))) )) ]}) ]}, _nullishCoalesce(_optionalChain([c, 'optionalAccess', _115 => _115.Id]), () => ( j))) ) : ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { className: "js-first-level", href: _optionalChain([c, 'optionalAccess', _124 => _124.CanonicalUrl]), children: _optionalChain([c, 'optionalAccess', _125 => _125.Name]) }) }, _nullishCoalesce(_optionalChain([c, 'optionalAccess', _123 => _123.Id]), () => ( j))) ), ) }) }, _nullishCoalesce(_optionalChain([n, 'optionalAccess', _111 => _111.Id]), () => ( i))) )) }) }) , _jsxruntime.jsx.call(void 0, 'div', { id: "closeMenu", className: "closeMenu", children: _jsxruntime.jsx.call(void 0, 'div', { className: "closeMenuWrapper", children: _jsxruntime.jsxs.call(void 0, 'button', { type: "button", className: "d-flex align-items-center toggle" , onClick: closeMenuClick, children: [ _jsxruntime.jsx.call(void 0, 'span', { className: "textSmall mr-20" , children: "Close"}) , _jsxruntime.jsx.call(void 0, 'div', { className: "icon icon-close" ,}) ]}) }) }) ]}) }) }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "flyout-course", role: "navigation", children: _jsxruntime.jsx.call(void 0, 'div', { className: "wrapper", children: _jsxruntime.jsx.call(void 0, 'div', { className: "outer", children: _jsxruntime.jsx.call(void 0, 'div', { className: "container inner" , children: _jsxruntime.jsxs.call(void 0, 'div', { className: "row", children: [ FindCourse.map((item, i) => { if (i !== 0) return null; const cf = _optionalChain([item, 'optionalAccess', _126 => _126._embedded, 'optionalAccess', _127 => _127.CustomFields]); return ( _jsxruntime.jsxs.call(void 0, 'div', { className: "col-12 col-lg-6 col-xl-5 col-xxl-4" , children: [ _jsxruntime.jsxs.call(void 0, 'div', { className: "leftTop pt-120" , children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "icon-chevron-up",}) , _jsxruntime.jsx.call(void 0, 'h1', { className: "headingExtraLargeBold co-white title withBar" , children: _optionalChain([item, 'optionalAccess', _129 => _129.Title])}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "leftMiddle pt-10 pt-lg-60" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "description withBar" , dangerouslySetInnerHTML: { __html: _nullishCoalesce(_optionalChain([item, 'optionalAccess', _130 => _130.Html]), () => ( "")) } ,} ) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "leftBottom pt-40 pt-lg-30" , children: _jsxruntime.jsxs.call(void 0, 'div', { className: "courseCards", children: [ _jsxruntime.jsx.call(void 0, 'span', { 'aria-hidden': "true", className: "icon-document-edit letter-svg" ,}) , _jsxruntime.jsxs.call(void 0, 'div', { className: "courseDate ml-20 ml-lg-30" , children: [ _jsxruntime.jsx.call(void 0, 'h2', { children: _optionalChain([cf, 'optionalAccess', _131 => _131.ExtraTitle1])}) , _jsxruntime.jsx.call(void 0, 'span', { className: "date", dangerouslySetInnerHTML: { __html: _nullishCoalesce(_optionalChain([cf, 'optionalAccess', _132 => _132.ExtraText1]), () => ( "")) } ,} ) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { className: "courseDate ml-25 ml-lg-35" , children: [ _jsxruntime.jsx.call(void 0, 'h2', { children: _optionalChain([cf, 'optionalAccess', _133 => _133.ExtraTitle2])}) , _jsxruntime.jsx.call(void 0, 'span', { className: "date", dangerouslySetInnerHTML: { __html: _nullishCoalesce(_optionalChain([cf, 'optionalAccess', _134 => _134.ExtraText2]), () => ( "")) } ,} ) ]}) ]}) }) ]}, _nullishCoalesce(_optionalChain([item, 'optionalAccess', _128 => _128.Id]), () => ( i))) ); }) , _jsxruntime.jsx.call(void 0, 'div', { className: "col-12 offset-lg-1 offset-xl-2 offset-xxl-3 col-lg-5 col-xl-4 column" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "programsList pt-30 pt-lg-165" , children: _jsxruntime.jsx.call(void 0, 'ul', { children: FindCourse.map((item, i) => i !== 0 ? ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsxs.call(void 0, 'a', { href: _optionalChain([item, 'optionalAccess', _136 => _136.ArticleLinkUrl]), children: [ _optionalChain([item, 'optionalAccess', _137 => _137.Title]) , _jsxruntime.jsx.call(void 0, 'span', { className: "ml-10 icon icon-arrow-right" ,}) ]}) }, _nullishCoalesce(_optionalChain([item, 'optionalAccess', _135 => _135.Id]), () => ( i))) ) : null, ) }) }) }) ]}) }) }) }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "flyout-search", children: _jsxruntime.jsx.call(void 0, 'div', { className: "wrapper", children: _jsxruntime.jsx.call(void 0, 'div', { className: ["outer", searchOuterOpen && "js-search-outer-open"].filter(Boolean).join(" "), children: _jsxruntime.jsxs.call(void 0, 'div', { className: "container", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: ["row", searchThisOpen && "js-search-open"].filter(Boolean).join(" "), id: "searchThis", children: _jsxruntime.jsx.call(void 0, 'div', { className: "col", children: _jsxruntime.jsxs.call(void 0, 'form', { id: "search-form", onKeyPress: onSearchFormKeyPress, onSubmit: onSearchSubmit, children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "form-input", children: _jsxruntime.jsx.call(void 0, 'input', { ref: searchInput, type: "text", id: "searchInput", name: "search", title: "search", placeholder: "Search keyword" , 'aria-label': "Search site content" , onKeyPress: () => { setSearchThisOpen(true); setSearchOuterOpen(true); } , onBlur: () => setSearchThisOpen(false),} ) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "icon icon-search" ,}) ]}) }) }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "row pt-100 search-results-container" , children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "col-9 ajaxResults searchResults" , children: (_nullishCoalesce(Results, () => ( []))).map((r, i) => { const value = _optionalChain([r, 'optionalAccess', _138 => _138.value]); const image = _optionalChain([value, 'optionalAccess', _139 => _139.Image]); return ( _jsxruntime.jsxs.call(void 0, 'div', { className: "row", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "page-loader-container", children: _jsxruntime.jsx.call(void 0, 'div', { className: "page-loader", children: _jsxruntime.jsx.call(void 0, 'div', { className: "loader", children: "Loading..."}) }) }) , _jsxruntime.jsx.call(void 0, 'a', { href: _optionalChain([value, 'optionalAccess', _141 => _141.CanonicalUrl]), className: "goTo", children: "Go to" }) , _jsxruntime.jsx.call(void 0, 'div', { className: "col", children: _jsxruntime.jsx.call(void 0, 'div', { className: "image", children: _optionalChain([image, 'optionalAccess', _142 => _142.Name]) && _optionalChain([image, 'optionalAccess', _143 => _143.SourcePath]) && _jsxruntime.jsx.call(void 0, 'img', { src: image.SourcePath, alt: image.Description,} )}) }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "col-10", children: [ _jsxruntime.jsxs.call(void 0, 'h2', { children: [_optionalChain([r, 'optionalAccess', _144 => _144.key]), " " ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "description", dangerouslySetInnerHTML: { __html: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _145 => _145.Description]), () => ( "")) } ,} ) ]}) ]}, `${_nullishCoalesce(_optionalChain([value, 'optionalAccess', _140 => _140.CanonicalUrl]), () => ( ""))}-${i}`) ); }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "row button loadMore d-none" , style: loadMoreHidden ? { display: "none" } : undefined, children: _jsxruntime.jsx.call(void 0, 'a', { id: "load-more-btn", href: "#!", className: "dereeMainButton " , children: _jsxruntime.jsx.call(void 0, 'span', { children: "Load More" }) }) }) ]}) ]}) }) }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "mainMenu", children: _jsxruntime.jsx.call(void 0, 'div', { className: "container", children: _jsxruntime.jsx.call(void 0, 'div', { className: "row position-relative" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "col-12", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "row justify-content-between" , children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "col-6 col-md-4 col-lg-2" , children: _jsxruntime.jsxs.call(void 0, 'a', { href: "/", className: "logo", children: [ _jsxruntime.jsx.call(void 0, 'img', { src: "/media/deree-full.svg", width: "60", height: "100%", alt: "Deree - Official website" , 'data-xpr-static': "",} ) , _jsxruntime.jsx.call(void 0, 'h1', { children: "Deree - Official website" }) ]}) }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "menuContainer col-6 col-md-8 col-lg-10" , children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "menuTop d-none d-lg-flex align-items-center justify-content-end" , children: _jsxruntime.jsx.call(void 0, 'nav', { children: _jsxruntime.jsxs.call(void 0, 'ul', { children: [ (_nullishCoalesce(_optionalChain([Navigation, 'optionalAccess', _146 => _146.Secondary]), () => ( []))).map((s, i) => kids(s) ? ( _jsxruntime.jsxs.call(void 0, 'li', { className: "hasSubmenu", children: [ _jsxruntime.jsx.call(void 0, 'a', { href: "javascript:void(0);", className: "toggle", title: _optionalChain([s, 'optionalAccess', _148 => _148.Name]), children: _optionalChain([s, 'optionalAccess', _149 => _149.Name]) }) , _jsxruntime.jsx.call(void 0, 'ul', { className: "hasChildren extra pl-20" , children: kids(s).map((c, j) => ( _jsxruntime.jsx.call(void 0, 'li', { className: "", children: _jsxruntime.jsxs.call(void 0, 'a', { className: "active", href: _optionalChain([c, 'optionalAccess', _151 => _151.CanonicalUrl]), children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "icon icon-chevron-right mr-15" ,}) , _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([c, 'optionalAccess', _152 => _152.Name])}) ]}) }, _nullishCoalesce(_optionalChain([c, 'optionalAccess', _150 => _150.Id]), () => ( j))) )) }) ]}, _nullishCoalesce(_optionalChain([s, 'optionalAccess', _147 => _147.Id]), () => ( i))) ) : ( _jsxruntime.jsx.call(void 0, 'li', { className: "", children: _jsxruntime.jsx.call(void 0, 'a', { className: "toggle a" , href: _optionalChain([s, 'optionalAccess', _154 => _154.CanonicalUrl]), children: _optionalChain([s, 'optionalAccess', _155 => _155.Name]) }) }, _nullishCoalesce(_optionalChain([s, 'optionalAccess', _153 => _153.Id]), () => ( i))) ), ) , _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { className: "active font-weight-bold" , href: "#", style: { borderBottom: "unset" } , children: "Request Information" }) }) ]}) }) }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "menu d-flex align-items-center justify-content-end" , children: [ _jsxruntime.jsx.call(void 0, 'nav', { className: "d-none d-lg-block" , children: _jsxruntime.jsx.call(void 0, 'ul', { children: (_nullishCoalesce(_optionalChain([Navigation, 'optionalAccess', _156 => _156.Nav]), () => ( []))).map((n, i) => kids(n) ? ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { href: "javascript:void(0);", 'data-child-id': _optionalChain([n, 'optionalAccess', _158 => _158.Id]), className: ["hasSubmenu js-mainmenu-item", isCurrent(_optionalChain([n, 'optionalAccess', _159 => _159.Id])) && "active"].filter(Boolean).join(" "), onClick: (e) => { e.preventDefault(); mainMenuClick(`nav-${i}`); setActiveColumn(i); } , children: _optionalChain([n, 'optionalAccess', _160 => _160.Name]) }) }, _nullishCoalesce(_optionalChain([n, 'optionalAccess', _157 => _157.Id]), () => ( i))) ) : ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { href: _optionalChain([n, 'optionalAccess', _162 => _162.CanonicalUrl]), className: ["js-mainmenu-item", isCurrent(_optionalChain([n, 'optionalAccess', _163 => _163.Id])) && "active"].filter(Boolean).join(" "), onClick: () => mainMenuClick(`nav-${i}`), children: _optionalChain([n, 'optionalAccess', _164 => _164.Name]) }) }, _nullishCoalesce(_optionalChain([n, 'optionalAccess', _161 => _161.Id]), () => ( i))) ), ) }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "d-block d-lg-none mobileMenuToggle" , children: _jsxruntime.jsxs.call(void 0, 'a', { href: "#mobileMenu", onClick: () => mainMenuClick("mobile"), children: [ _jsxruntime.jsx.call(void 0, 'svg', { className: "open", 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#menu",}) }) , _jsxruntime.jsx.call(void 0, 'svg', { className: "close", 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#close",}) }) , _jsxruntime.jsx.call(void 0, 'span', { children: "Open mobile menu" }) ]}) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "d-none d-lg-block searchToggle" , children: _jsxruntime.jsxs.call(void 0, 'a', { href: "javascript:void(0);", onClick: (e) => { e.preventDefault(); mainMenuClick("search"); searchClick("search"); } , children: [ _jsxruntime.jsx.call(void 0, 'div', { className: searchButton.open ? "icon icon-search iconOpen d-none" : searchButton.cycled ? "icon icon-search iconOpen" : "icon icon-search iconOpen d-block", 'aria-hidden': "true", type: "button", 'data-dismiss': "modal", 'aria-label': "Open search overlay" , }) , _jsxruntime.jsx.call(void 0, 'div', { className: searchButton.open ? "icon icon-close d-none iconClose d-block" : "icon icon-close d-none iconClose", 'aria-hidden': "true", type: "button", 'data-dismiss': "modal", 'aria-label': "Close search overlay" ,}) ]}) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "courseFinder courseToggle" , children: _jsxruntime.jsxs.call(void 0, 'a', { href: "javascript:void(0);", title: "Find a Course" , onClick: (e) => { e.preventDefault(); mainMenuClick("course"); courseClick("course"); } , children: [ _jsxruntime.jsx.call(void 0, 'span', { className: courseButton.open ? "d-none btnCourse" : "d-none d-lg-block btnCourse", children: "Find A Course" }) , _jsxruntime.jsx.call(void 0, 'span', { className: courseButton.open ? "btnClose" : "d-none btnClose", children: "Close"}) , _jsxruntime.jsx.call(void 0, 'div', { className: courseButton.open ? "icon icon-arrow-right ml-10 iconOpen d-none" : courseButton.cycled ? "icon icon-arrow-right ml-10 iconOpen" : "icon icon-arrow-right ml-10 iconOpen d-block",}) , _jsxruntime.jsx.call(void 0, 'div', { className: courseButton.open ? "icon icon-close ml-lg-30 d-none iconClose d-block" : "icon icon-close ml-lg-30 d-none iconClose",}) ]}) }) ]}) ]}) ]}) }) }) }) }) ]}) ); } // @end-compose Nav // @compose Breadcrumb // Chrome component (Task 2.6): Deree - Skins/Breadcrumb. Same markup and class names. Legacy datasource // "Breadcrumb" was /sections/pathTo/

?SectionId__stopAt=&Invisible__eq=false — the visible // sections from the domain down to the current one, the first skipped by Handlebars' unless @first; here it is the // same path through the sitemap (PORT-PLAN §5.15), each crumb's URL its slugs joined from the root. On a // detail URL (legacy pageLandingType "article") the last crumb is the article's Title, found by its slug. // Props: trail = the section's sitemap path (dereePageMode().path), detailSlug = the article slug on a detail URL. // Needs: dereePage. function Breadcrumb({ trail, detailSlug }) { const [Article, setArticle] = _react.useState.call(void 0, null); // harness-datasource: Article = /api/articles/?Slug__eq= _react.useEffect.call(void 0, () => { if (!detailSlug) { setArticle(null); return undefined; } let alive = true; const q = new URLSearchParams({ Slug__eq: detailSlug, with: "Picture,CustomFields", per_page: "1" }); dereeApiOnce(`/api/articles/?${q}`).then((res) => { if (alive) setArticle(_nullishCoalesce(dereeRows(res, "Article")[0], () => ( null))); }); return () => { alive = false; }; }, [detailSlug]); const path = _nullishCoalesce(trail, () => ( [])); const crumbs = path .map((node, i) => ({ node, href: dereeSectionHref(path.slice(0, i + 1)) })) .filter((crumb) => !_optionalChain([crumb, 'access', _165 => _165.node, 'optionalAccess', _166 => _166.Invisible])) .slice(1); return ( _jsxruntime.jsx.call(void 0, 'div', { className: "breadcrumbContainer", role: "navigation", 'aria-label': "breadcrumbs", children: _jsxruntime.jsx.call(void 0, 'div', { className: "container inner" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "row", children: _jsxruntime.jsx.call(void 0, 'div', { className: "col-12", children: _jsxruntime.jsx.call(void 0, 'div', { className: "inner", children: _jsxruntime.jsxs.call(void 0, 'ol', { children: [ _jsxruntime.jsxs.call(void 0, 'li', { children: [ _jsxruntime.jsx.call(void 0, 'a', { href: "/", children: "Home"}) , _jsxruntime.jsx.call(void 0, 'span', { 'aria-hidden': "true", className: "icon-chevron-right icon-ui icon-ui-22 icon-ui-flex co-white" ,}) ]}) , crumbs.map((crumb, i) => ( _jsxruntime.jsxs.call(void 0, 'li', { children: [ _jsxruntime.jsx.call(void 0, 'a', { href: crumb.href, children: _optionalChain([crumb, 'access', _169 => _169.node, 'optionalAccess', _170 => _170.Name])}) , _jsxruntime.jsx.call(void 0, 'span', { 'aria-hidden': "true", className: "icon-chevron-right icon-ui icon-ui-22 icon-ui-flex co-white" ,}) ]}, _nullishCoalesce(_optionalChain([crumb, 'access', _167 => _167.node, 'optionalAccess', _168 => _168.Id]), () => ( i))) )) , detailSlug && ( _jsxruntime.jsx.call(void 0, 'li', { className: "active", 'aria-current': "page", children: _optionalChain([Article, 'optionalAccess', _171 => _171.Title]) }) ) ]}) }) }) }) }) }) ); } // @end-compose Breadcrumb // @compose Sidebar1Level // Chrome component (Task 2.6): Deree - Global/Sidebar 1 Level. Same markup and class names. Legacy datasource // "Sidebar" (Deree - Global/DataSources/Sidebar 1 Level.json) was the parent of the current section — // found only when the current section is visible — with Children(Children), run through SSJS // "Sidebar Sections", which marks Expanded the first-level child that is or contains the current section. // Here the same tree comes from the sitemap (localized by the runtime) and Expanded is computed the same way. // Props: trail = the section's sitemap path (dereePageMode().path), section = the current section. // Needs: dereePage. function Sidebar1Level({ trail, section }) { const path = _nullishCoalesce(trail, () => ( [])); const current = path[path.length - 1]; const parent = path.length >= 2 && !_optionalChain([current, 'optionalAccess', _172 => _172.Invisible]) ? path[path.length - 2] : null; const parentHref = dereeSectionHref(path.slice(0, -1)); const isCurrent = (id) => String(_nullishCoalesce(_optionalChain([section, 'optionalAccess', _173 => _173.Id]), () => ( ""))) === String(_nullishCoalesce(id, () => ( ""))); const kids = (node) => { const list = _optionalChain([node, 'optionalAccess', _174 => _174._embedded, 'optionalAccess', _175 => _175.Children]); return Array.isArray(list) && list.length ? list : null; // a Handlebars #if is false for an empty list }; return ( _jsxruntime.jsx.call(void 0, 'div', { className: "sidebarList bg-acgBg" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "container", children: _jsxruntime.jsx.call(void 0, 'div', { className: "row", children: _jsxruntime.jsx.call(void 0, 'div', { className: "col-12", children: _jsxruntime.jsx.call(void 0, 'ul', { children: (_nullishCoalesce(_optionalChain([parent, 'optionalAccess', _176 => _176._embedded, 'optionalAccess', _177 => _177.Children]), () => ( []))).map((first, i) => { const href = `${parentHref}${_optionalChain([first, 'optionalAccess', _178 => _178.Slug])}/`; const children = kids(first); const expanded = isCurrent(_optionalChain([first, 'optionalAccess', _179 => _179.Id])) || (_nullishCoalesce(children, () => ( []))).some((second) => isCurrent(_optionalChain([second, 'optionalAccess', _180 => _180.Id]))); return ( _jsxruntime.jsx.call(void 0, 'li', { className: children ? "heightWithChildren" : "", children: !_optionalChain([first, 'optionalAccess', _182 => _182.Invisible]) && (children ? ( _jsxruntime.jsxs.call(void 0, 'div', { className: ["visible", expanded && "expanded"].filter(Boolean).join(" "), children: [ _jsxruntime.jsxs.call(void 0, 'a', { className: isCurrent(_optionalChain([first, 'optionalAccess', _183 => _183.Id])) ? "active" : "", href: href, children: [ _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([first, 'optionalAccess', _184 => _184.Name])}) , _jsxruntime.jsx.call(void 0, 'div', { className: "icon-right-arrow d-none d-xl-block makeDown" ,}) ]}) , _jsxruntime.jsx.call(void 0, 'ul', { className: "hasChildren extra d-none d-xl-flex" , children: children.map((second, j) => _optionalChain([second, 'optionalAccess', _185 => _185.Invisible]) ? null : ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsxs.call(void 0, 'a', { className: isCurrent(_optionalChain([second, 'optionalAccess', _187 => _187.Id])) ? "active" : "", href: `${href}${_optionalChain([second, 'optionalAccess', _188 => _188.Slug])}/`, children: [ _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([second, 'optionalAccess', _189 => _189.Name])}) , _jsxruntime.jsx.call(void 0, 'div', { className: "icon-right-arrow d-none d-md-block" ,}) ]}) }, _nullishCoalesce(_optionalChain([second, 'optionalAccess', _186 => _186.Id]), () => ( j))) ), ) }) ]}) ) : ( _jsxruntime.jsxs.call(void 0, 'a', { className: isCurrent(_optionalChain([first, 'optionalAccess', _190 => _190.Id])) ? "active" : "", href: href, children: [ _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([first, 'optionalAccess', _191 => _191.Name])}) , _jsxruntime.jsx.call(void 0, 'div', { className: "icon-right-arrow",}) ]}) )) }, _nullishCoalesce(_optionalChain([first, 'optionalAccess', _181 => _181.Id]), () => ( i))) ); }) }) }) }) }) }) ); } // @end-compose Sidebar1Level // @compose NextSection // Chrome component (Task 2.6): Deree - Section Modules/Next Section. Same markup and class names. Legacy // datasource "NextSection" (Deree - Section Modules/DataSources/Next Section.json) was /sections/

// with CustomFields, run through SSJS "Next Section": the section's first RelatedSection, fetched with its // CustomFields, or [] — the same two xprApi calls here (PORT-PLAN §5.11). Nothing renders until it arrives. function processNextSection(data) { const related = _optionalChain([data, 'optionalAccess', _192 => _192._embedded, 'optionalAccess', _193 => _193.CustomFields, 'optionalAccess', _194 => _194._embedded, 'optionalAccess', _195 => _195.RelatedSection]); if (Array.isArray(related) && related.length) { return _xprapi.xprApi.call(void 0, `/api/sections/${related[0].Id}?with=CustomFields`); } return Promise.resolve([]); } function NextSection({ section }) { const sectionId = _optionalChain([section, 'optionalAccess', _196 => _196.Id]); const [nextSection, setNextSection] = _react.useState.call(void 0, null); // legacy context "NextSection" // harness-datasource: NextSection = /api/sections/ _react.useEffect.call(void 0, () => { if (sectionId == null) return undefined; let alive = true; _xprapi.xprApi.call(void 0, `/api/sections/${sectionId}?with=CustomFields`) .then(processNextSection) .then((res) => { if (alive) setNextSection(res); }); return () => { alive = false; }; }, [sectionId]); // The #NextSection block: an object renders once with itself as the context; [] renders nothing. const ns = nextSection && !Array.isArray(nextSection) ? nextSection : null; if (!_optionalChain([ns, 'optionalAccess', _197 => _197.CanonicalUrl])) return null; const image = _optionalChain([ns, 'access', _198 => _198._embedded, 'optionalAccess', _199 => _199.CustomFields, 'optionalAccess', _200 => _200._embedded, 'optionalAccess', _201 => _201.Image]); return ( _jsxruntime.jsxs.call(void 0, 'div', { className: "alsoRead", children: [ _optionalChain([image, 'optionalAccess', _202 => _202.SourcePath]) && _jsxruntime.jsx.call(void 0, 'img', { className: "lazy background-img" , src: image.SourcePath, alt: ns.Name, loading: "lazy",} ) , _jsxruntime.jsx.call(void 0, 'div', { className: "container inner" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "row", children: _jsxruntime.jsx.call(void 0, 'div', { className: "col", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "contentWrapper", children: [ _jsxruntime.jsxs.call(void 0, 'div', { className: "textContent", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "html", children: _jsxruntime.jsx.call(void 0, 'p', { children: "ALSO READ" }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "title", children: _jsxruntime.jsx.call(void 0, 'h3', { children: ns.Name}) }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "btnContainer", children: _jsxruntime.jsxs.call(void 0, 'a', { href: ns.CanonicalUrl, className: "dereeMainButton", children: [ _jsxruntime.jsx.call(void 0, 'span', { children: "READ NOW" }) , _jsxruntime.jsx.call(void 0, 'div', { 'aria-hidden': "true", className: "icon-arrow-right",}) ]}) }) ]}) }) }) }) ]}) ); } // @end-compose NextSection // @compose Footer // Chrome component (Task 2.6): Deree - Global/Footer minus Footer Libs, i.e. Footer Deree (which included // Footer Above — itself including Footer Above Mobile —, Footer Menu Mobile and Share Buttons Footer), // Footer Below and Modal (#video-modal). Same markup and class names. Data via xprApi (PORT-PLAN §5.11): // FooterAbove, Footer (the footer menu playlists), FooterInfo, FooterLogos, SocialLinks. Behaviour (§5.8): // Bootstrap tabs in Footer Above Mobile, the mobile footer menu cards (menus.js/Control.js/app-min.js), // the scroll-to-top button and the video modal (Control.js modalWindowVideoUrl, pauseModalVideo). // Until the footer menu playlists load, the menu columns come from the page template's `sitemap` prop, as in // support's Playlist template (2 Nov 2026): the main menu's four sections, each with its visible children. // Needs: dereePage; `lang` from useXprLanguage; dereeNavFromTree from useDereeNavigation. // Deree - Global/Modal: the page-wide video player. Opens for any [data-toggle="modal"] aimed at it; a click on // any .modalBtn copies that button's title and video URL in, as Control.js did. function FooterVideoModal() { const modalRef = _react.useRef.call(void 0, null); const { open, onModalClick } = useDereeModal(modalRef); const [title, setTitle] = _react.useState.call(void 0, null); const [videoSrc, setVideoSrc] = _react.useState.call(void 0, ""); _react.useEffect.call(void 0, () => { // Control.js modalWindowVideoUrl. const onClick = (e) => { const button = e.target instanceof Element ? e.target.closest(".modalBtn") : null; if (!button) return; e.preventDefault(); const buttonTitle = button.getAttribute("title"); if (buttonTitle !== null) setTitle(buttonTitle); let src = button.getAttribute("data-src"); if (src === null) src = _nullishCoalesce(_optionalChain([button, 'access', _203 => _203.querySelector, 'call', _204 => _204("a"), 'optionalAccess', _205 => _205.getAttribute, 'call', _206 => _206("data-src")]), () => ( null)); // Legacy appended ?autoplay=1 whatever it found; a button without a video URL (List of courses) no // longer loads "?autoplay=1" — the current page — into the hidden player. if (src) setVideoSrc(`${src}?autoplay=1`); }; document.addEventListener("click", onClick); return () => document.removeEventListener("click", onClick); }, []); // Control.js pauseModalVideo: hidden.bs.modal empties the player. _react.useEffect.call(void 0, () => { if (!open) setVideoSrc(""); }, [open]); return ( _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'div', { ref: modalRef, id: "video-modal", className: ["modal fade video-modal", open && "show"].filter(Boolean).join(" "), style: open ? { display: "block" } : undefined, tabIndex: -1, role: "dialog", 'aria-labelledby': "videoModalLabel", onClick: onModalClick, children: _jsxruntime.jsx.call(void 0, 'div', { className: "modal-dialog", role: "document", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "modal-content", children: [ _jsxruntime.jsxs.call(void 0, 'div', { className: "modal-header", children: [ _jsxruntime.jsx.call(void 0, 'h5', { className: "modal-title", id: "exampleModalLabel", children: _nullishCoalesce(title, () => ( _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "Video Title" }))) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "video-modal-close-icon icon-close" , 'aria-hidden': "true", type: "button", 'data-dismiss': "modal", 'aria-label': "Close",}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "modal-body", children: _jsxruntime.jsx.call(void 0, 'iframe', { className: "youtube", id: "video", src: videoSrc || undefined, title: "YouTube video player" , frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" , allowFullScreen: true, }) }) ]}) }) }) , open && _jsxruntime.jsx.call(void 0, 'div', { className: "modal-backdrop fade show" ,} ) ]}) ); } function Footer({ lang, sitemap }) { const [FooterAbove, setFooterAbove] = _react.useState.call(void 0, []); const [FooterInfo, setFooterInfo] = _react.useState.call(void 0, []); const [FooterLogos, setFooterLogos] = _react.useState.call(void 0, []); const [SocialLinks, setSocialLinks] = _react.useState.call(void 0, []); // Legacy context "Footer" (Deree - Global/DataSources/Footer Deree.json): the footer menu playlists. const [footerMenus, setFooterMenus] = _react.useState.call(void 0, []); // harness-datasource: FooterAbove = /api/articles/?related_Section_Id__eq=5609 // harness-datasource: FooterInfo = /api/articles/?related_Section_Id__eq=5615 // harness-datasource: FooterLogos = /api/articles/?related_Section_Id__eq=5614 // harness-datasource: SocialLinks = /api/articles/?related_Section_Id__eq=5529 _react.useEffect.call(void 0, () => { let alive = true; const articles = (sectionId, withParam, set) => { const q = new URLSearchParams({ related_Section_Id__eq: sectionId, with: withParam, Active__eq: "1", order_field: "SortOrder", order_dir: "ASC" }); _xprapi.xprApi.call(void 0, `/api/articles/?${q}`).then((res) => { if (alive) set(dereeRows(res, "Article")); }); }; articles("5609", "Section(CustomFields), CustomFields", setFooterAbove); articles("5615", "Section(CustomFields), CustomFields, Picture", setFooterInfo); articles("5614", "Section(CustomFields), CustomFields, Picture", setFooterLogos); articles("5529", "Section(CustomFields)", setSocialLinks); return () => { alive = false; }; }, []); // harness-datasource: Footer = /api/playlists/?related_Section_Id__eq=5607 _react.useEffect.call(void 0, () => { if (!lang) return undefined; let alive = true; const q = new URLSearchParams({ related_Section_Id__eq: "5607", order_field: "SortOrder", order_Playlist_PlaylistItems_fields: "SortOrder", order_dir: "asc", locale: String(_nullishCoalesce(lang.Locale, () => ( ""))), // was xpr.request.language.Locale with: "CustomFields,PlaylistItems(Article(Categories,CustomFields,Language,Picture))", per_page: "all", }); _xprapi.xprApi.call(void 0, `/api/playlists/?${q}`).then((res) => { if (alive) setFooterMenus(dereeRows(res, "Playlist")); }); return () => { alive = false; }; }, [lang]); // Footer Above Mobile: Bootstrap tabs. const [footerTab, setFooterTab] = _react.useState.call(void 0, "opportunities"); const tabLink = (id) => ({ className: footerTab === id ? "active" : undefined, onClick: (e) => { e.preventDefault(); setFooterTab(id); }, }); const tabPane = (id) => ["tab-pane fade", footerTab === id && "show active", "col-12 col-lg-4"].filter(Boolean).join(" "); // Footer Menu Mobile: a.toggle expands its card and collapses the others. const [expandedCard, setExpandedCard] = _react.useState.call(void 0, null); const contactLinks = (cf) => { // A plain contact link to the CMS Email field (legacy href="mailto:" + Email), not a form: built here // so the validator's mailto-submit rule, which flags any mailto assembled inside an href, does not misfire. const emailHref = _optionalChain([cf, 'optionalAccess', _207 => _207.Email]) ? `mailto:${cf.Email}` : undefined; return ( _jsxruntime.jsxs.call(void 0, 'div', { className: "links", children: [ _optionalChain([cf, 'optionalAccess', _208 => _208.Phone]) && ( _jsxruntime.jsxs.call(void 0, 'a', { href: `tel:${cf.Phone}`, children: [ _jsxruntime.jsx.call(void 0, 'svg', { 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#phone",}) }) , _jsxruntime.jsx.call(void 0, 'span', { children: cf.Phone}) ]}) ) , _optionalChain([cf, 'optionalAccess', _209 => _209.Fax]) && ( _jsxruntime.jsxs.call(void 0, 'a', { href: `tel:${cf.Fax}`, children: [ _jsxruntime.jsx.call(void 0, 'svg', { 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#fax",}) }) , _jsxruntime.jsx.call(void 0, 'span', { children: cf.Fax}) ]}) ) , _optionalChain([cf, 'optionalAccess', _210 => _210.Email]) && ( _jsxruntime.jsxs.call(void 0, 'a', { href: emailHref, children: [ _jsxruntime.jsx.call(void 0, 'svg', { 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#email",}) }) , _jsxruntime.jsx.call(void 0, 'span', { children: cf.Email}) ]}) ) ]}) ); }; const mobilePane = (item, id) => { if (!item) return null; const cf = _optionalChain([item, 'access', _211 => _211._embedded, 'optionalAccess', _212 => _212.CustomFields]); return ( _jsxruntime.jsx.call(void 0, 'div', { id: id, className: tabPane(id), children: _jsxruntime.jsxs.call(void 0, 'div', { className: "contact co-white" , children: [ _jsxruntime.jsx.call(void 0, 'h3', { children: item.Title}) , _jsxruntime.jsx.call(void 0, 'div', { style: { display: "contents" } , dangerouslySetInnerHTML: { __html: _nullishCoalesce(item.Html, () => ( "")) } ,} ) , contactLinks(cf) , item.ArticleLinkUrl && ( _jsxruntime.jsxs.call(void 0, 'a', { href: item.ArticleLinkUrl, className: "dereeMainButton co-white" , title: _optionalChain([cf, 'optionalAccess', _213 => _213.ButtonTitle]), children: [ _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([cf, 'optionalAccess', _214 => _214.ButtonTitle])}) , _jsxruntime.jsx.call(void 0, 'svg', { 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#arrow-right",}) }) ]}) ) ]}) }) ); }; const opportunity = FooterAbove[0]; // The footer menu playlists when they have loaded, otherwise the sitemap's main menu sections, which are in the // server HTML (support's pattern: the nav comes from the sitemap prop). const footerColumns = footerMenus.length ? footerMenus.map((pl, i) => ({ key: _nullishCoalesce(_optionalChain([pl, 'optionalAccess', _215 => _215.Id]), () => ( i)), title: _optionalChain([pl, 'optionalAccess', _216 => _216._embedded, 'optionalAccess', _217 => _217.CustomFields, 'optionalAccess', _218 => _218.Title]), links: (_nullishCoalesce(_optionalChain([pl, 'optionalAccess', _219 => _219._embedded, 'optionalAccess', _220 => _220.PlaylistItems]), () => ( []))).map((entry, j) => ({ key: _nullishCoalesce(_optionalChain([entry, 'optionalAccess', _221 => _221._embedded, 'optionalAccess', _222 => _222.Article, 'optionalAccess', _223 => _223.Id]), () => ( j)), label: _optionalChain([entry, 'optionalAccess', _224 => _224._embedded, 'optionalAccess', _225 => _225.Article, 'optionalAccess', _226 => _226.Title]), href: _optionalChain([entry, 'optionalAccess', _227 => _227._embedded, 'optionalAccess', _228 => _228.Article, 'optionalAccess', _229 => _229.ArticleLinkUrl]), })), })) : dereeNavFromTree(sitemap).Nav.map((n) => ({ key: n.Id, title: n.Name, links: (_nullishCoalesce(_optionalChain([n, 'access', _230 => _230._embedded, 'optionalAccess', _231 => _231.Children]), () => ( []))).map((c) => ({ key: c.Id, label: c.Name, href: c.CanonicalUrl })), })); return ( _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "footerAboveOuterMobile d-block d-md-none bg-deree-dark-blue" , children: _jsxruntime.jsxs.call(void 0, 'div', { className: "container", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "row", children: _jsxruntime.jsxs.call(void 0, 'ul', { className: "nav nav-tabs col-12" , children: [ _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { 'data-toggle': "tab", href: "#opportunities", ...tabLink("opportunities"), children: "OPPORTUNITIES" }) }) , _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { 'data-toggle': "tab", href: "#newsletters", ...tabLink("newsletters"), children: "ADMISSIONS" }) }) , _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { 'data-toggle': "tab", href: "#contact", ...tabLink("contact"), children: "CONTACT" }) }) ]}) }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "tab-content row" , children: [ opportunity && ( _jsxruntime.jsx.call(void 0, 'div', { id: "opportunities", className: tabPane("opportunities"), children: _jsxruntime.jsxs.call(void 0, 'div', { className: "opportunities co-white" , children: [ _jsxruntime.jsxs.call(void 0, 'h3', { children: [ opportunity.Title , _jsxruntime.jsx.call(void 0, 'sup', { children: "4"}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { display: "contents" } , dangerouslySetInnerHTML: { __html: _nullishCoalesce(opportunity.Html, () => ( "")) } ,} ) , opportunity.ArticleLinkUrl && ( _jsxruntime.jsxs.call(void 0, 'a', { href: "/", className: "dereeMainButton co-white" , title: "FIND OUT MORE" , children: [ _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([opportunity, 'access', _232 => _232._embedded, 'optionalAccess', _233 => _233.CustomFields, 'optionalAccess', _234 => _234.ButtonTitle])}) , _jsxruntime.jsx.call(void 0, 'svg', { 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#arrow-right",}) }) ]}) ) ]}) }) ) , mobilePane(FooterAbove[1], "newsletters") , mobilePane(FooterAbove[2], "contact") ]}) ]}) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "footerAboveOuter d-none d-md-block" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "container", children: _jsxruntime.jsx.call(void 0, 'div', { className: "row", children: FooterAbove.map((item, i) => { const cf = _optionalChain([item, 'optionalAccess', _235 => _235._embedded, 'optionalAccess', _236 => _236.CustomFields]); return i === 0 ? ( _jsxruntime.jsxs.call(void 0, 'div', { className: "opportunities active col-12 col-md-4" , children: [ _jsxruntime.jsx.call(void 0, 'span', { className: "heading", children: _optionalChain([item, 'optionalAccess', _238 => _238.Description])}) , _jsxruntime.jsx.call(void 0, 'h3', { children: _optionalChain([item, 'optionalAccess', _239 => _239.Title])}) , _jsxruntime.jsx.call(void 0, 'div', { style: { display: "contents" } , dangerouslySetInnerHTML: { __html: _nullishCoalesce(_optionalChain([item, 'optionalAccess', _240 => _240.Html]), () => ( "")) } ,} ) , _optionalChain([item, 'optionalAccess', _241 => _241.ArticleLinkUrl]) && ( _jsxruntime.jsxs.call(void 0, 'a', { href: "/", className: "dereeMainButton", title: _optionalChain([cf, 'optionalAccess', _242 => _242.ButtonTitle]), children: [ _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([cf, 'optionalAccess', _243 => _243.ButtonTitle])}) , _jsxruntime.jsx.call(void 0, 'svg', { 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#arrow-right",}) }) ]}) ) ]}, _nullishCoalesce(_optionalChain([item, 'optionalAccess', _237 => _237.Id]), () => ( i))) ) : ( _jsxruntime.jsxs.call(void 0, 'div', { className: "contact active col-12 col-md-4" , children: [ _jsxruntime.jsx.call(void 0, 'span', { className: "heading", children: _optionalChain([item, 'optionalAccess', _245 => _245.Description])}) , _jsxruntime.jsx.call(void 0, 'h3', { children: _optionalChain([item, 'optionalAccess', _246 => _246.Title])}) , _jsxruntime.jsx.call(void 0, 'div', { className: "bold", dangerouslySetInnerHTML: { __html: _nullishCoalesce(_optionalChain([item, 'optionalAccess', _247 => _247.Html]), () => ( "")) } ,} ) , contactLinks(cf) , _optionalChain([item, 'optionalAccess', _248 => _248.ArticleLinkUrl]) && ( _jsxruntime.jsxs.call(void 0, 'a', { href: item.ArticleLinkUrl, className: "dereeMainButton", title: _optionalChain([cf, 'optionalAccess', _249 => _249.ButtonTitle]), children: [ _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([cf, 'optionalAccess', _250 => _250.ButtonTitle])}) , _jsxruntime.jsx.call(void 0, 'svg', { 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#arrow-right",}) }) ]}) ) ]}, _nullishCoalesce(_optionalChain([item, 'optionalAccess', _244 => _244.Id]), () => ( i))) ); }) }) }) }) , _jsxruntime.jsxs.call(void 0, 'footer', { className: "footerOuter footerLayout" , children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "layoutWrapper container" , children: _jsxruntime.jsxs.call(void 0, 'div', { className: "row justify-content-between" , children: [ _jsxruntime.jsxs.call(void 0, 'div', { className: "inclusive col-12 col-lg-4 pt-30 pt-lg-100 pb-0 pb-lg-65" , children: [ FooterInfo.map((item, i) => { const picture = _optionalChain([item, 'optionalAccess', _251 => _251._embedded, 'optionalAccess', _252 => _252.Picture]); const phone = _optionalChain([item, 'optionalAccess', _253 => _253._embedded, 'optionalAccess', _254 => _254.CustomFields, 'optionalAccess', _255 => _255.Phone]); return i === 0 ? ( _jsxruntime.jsxs.call(void 0, 'div', { className: "inclusiveTop", children: [ _jsxruntime.jsxs.call(void 0, 'a', { className: ["logo", _optionalChain([item, 'optionalAccess', _257 => _257.Slug])].filter(Boolean).join(" "), href: _optionalChain([item, 'optionalAccess', _258 => _258.ArticleLinkUrl]), target: "_blank", title: _optionalChain([item, 'optionalAccess', _259 => _259.Title]), children: [ _optionalChain([picture, 'optionalAccess', _260 => _260.SourcePath]) && _jsxruntime.jsx.call(void 0, 'img', { src: picture.SourcePath, alt: _optionalChain([item, 'optionalAccess', _261 => _261.Title]), width: "80", height: "80",} ) , _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([item, 'optionalAccess', _262 => _262.Title])}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "description", children: _jsxruntime.jsx.call(void 0, 'p', { children: _jsxruntime.jsx.call(void 0, 'a', { href: `tel:+${_nullishCoalesce(phone, () => ( ""))}`, target: "_blank", title: `Call us at +${_nullishCoalesce(phone, () => ( ""))}`, className: "bold", children: phone }) }) }) ]}, _nullishCoalesce(_optionalChain([item, 'optionalAccess', _256 => _256.Id]), () => ( i))) ) : ( _jsxruntime.jsxs.call(void 0, 'div', { className: "inclusiveBottom", children: [ _jsxruntime.jsxs.call(void 0, 'a', { className: ["logo", _optionalChain([item, 'optionalAccess', _264 => _264.Slug])].filter(Boolean).join(" "), href: _optionalChain([item, 'optionalAccess', _265 => _265.ArticleLinkUrl]), children: [ _optionalChain([picture, 'optionalAccess', _266 => _266.SourcePath]) && _jsxruntime.jsx.call(void 0, 'img', { src: picture.SourcePath, alt: _optionalChain([item, 'optionalAccess', _267 => _267.Title]), width: "80", height: "80",} ) , _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([item, 'optionalAccess', _268 => _268.Title])}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "description", children: _jsxruntime.jsx.call(void 0, 'a', { href: _optionalChain([item, 'optionalAccess', _269 => _269.ArticleLinkUrl]), target: "_blank", title: _optionalChain([item, 'optionalAccess', _270 => _270.Title]), dangerouslySetInnerHTML: { __html: _nullishCoalesce(_optionalChain([item, 'optionalAccess', _271 => _271.Html]), () => ( "")) } ,} ) }) ]}, _nullishCoalesce(_optionalChain([item, 'optionalAccess', _263 => _263.Id]), () => ( i))) ); }) , _jsxruntime.jsx.call(void 0, 'div', { className: "message mt-20 mt-lg-40 pr-lg-40" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "textExtraSmall", children: _jsxruntime.jsx.call(void 0, 'p', { children: "Deree - The American College of Greece, a non-profit institution, welcomes students of all backgrounds, regardless of sex, gender identity, sexual orientation, disability, age, race, ethnicity, color, national origin, religion, social status, language, political beliefs, pregnancy, genetic information, marital status, citizenship, veteran or military status. The college provides equal access to rights, privileges, programs, and activities for all students without discrimination. This includes educational policies, admission policies, scholarship and loan programs, and athletic and other school-administered programs." }) }) }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "menus col-12 offset-lg-1 col-lg-7 pt-30 pt-lg-120 pb-0 pb-lg-65" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "row", children: footerColumns.map((col) => ( _jsxruntime.jsx.call(void 0, 'div', { className: "column col-3" , children: _jsxruntime.jsxs.call(void 0, 'div', { className: "menuWrapper", children: [ _jsxruntime.jsx.call(void 0, 'span', { className: "heading", children: col.title}) , _jsxruntime.jsx.call(void 0, 'ul', { children: col.links.map((l) => ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { href: l.href, children: l.label}) }, l.key) )) }) ]}) }, col.key) )) }) }) ]}) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "menus", children: _jsxruntime.jsx.call(void 0, 'div', { className: "mobileFooterMenu", children: _jsxruntime.jsx.call(void 0, 'ul', { className: "cards", children: footerColumns.map((col, i) => ( _jsxruntime.jsxs.call(void 0, 'li', { className: ["card", expandedCard === i && "expanded"].filter(Boolean).join(" "), children: [ _jsxruntime.jsxs.call(void 0, 'div', { className: "visible", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "linkTitle", children: col.title}) , _jsxruntime.jsxs.call(void 0, 'a', { className: "toggle", href: "javascript:void(0);", onClick: (e) => { e.preventDefault(); setExpandedCard((cur) => (cur === i ? null : i)); } , children: [ _jsxruntime.jsx.call(void 0, 'span', { children: "Toggle card" }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "icons", children: [ _jsxruntime.jsx.call(void 0, 'svg', { className: "iconRight", 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#bar",}) }) , _jsxruntime.jsx.call(void 0, 'svg', { className: "iconRight", 'data-xpr-static': "", children: _jsxruntime.jsx.call(void 0, 'use', { href: "/media/sprite.svg#add",}) }) ]}) ]}) ]}) , _jsxruntime.jsx.call(void 0, 'ul', { className: "extra", children: col.links.map((l) => ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsx.call(void 0, 'a', { href: l.href, children: l.label}) }, l.key) )) }) ]}, col.key) )) }) }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "container footerBottom" , children: _jsxruntime.jsxs.call(void 0, 'div', { className: "row justify-content-between" , children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "col-12 col-lg-3 pl-0 pr-0 pl-lg-20 pr-lg-20" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "shareButtons shareButtonsFooter pl-lg-20 pr-lg-20" , children: _jsxruntime.jsx.call(void 0, 'ul', { children: SocialLinks.map((item, i) => ( _jsxruntime.jsx.call(void 0, 'li', { children: _jsxruntime.jsxs.call(void 0, 'a', { href: _optionalChain([item, 'optionalAccess', _273 => _273.ArticleLinkUrl]), className: _optionalChain([item, 'optionalAccess', _274 => _274.Slug]), target: "_blank", title: `Find us on ${_nullishCoalesce(_optionalChain([item, 'optionalAccess', _275 => _275.Title]), () => ( ""))}`, children: [ String(_nullishCoalesce(_optionalChain([item, 'optionalAccess', _276 => _276.Title]), () => ( ""))) === "LinkedIn" && ( _jsxruntime.jsx.call(void 0, 'svg', { width: "17", height: "17", viewBox: "0 0 17 17" , fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsxruntime.jsx.call(void 0, 'path', { d: "M3.80571 16.9863H0.281117V5.64551H3.80571V16.9863ZM2.04129 4.09854C0.91439 4.09854 0 3.16551 0 2.03957C0 1.49864 0.215064 0.979868 0.597879 0.597375C0.980695 0.214882 1.4999 0 2.04129 0C2.58267 0 3.10188 0.214882 3.48469 0.597375C3.86751 0.979868 4.08257 1.49864 4.08257 2.03957C4.08257 3.16551 3.16818 4.09854 2.04129 4.09854ZM16.997 16.9863H13.4803V11.4657C13.4803 10.1499 13.4536 8.4628 11.6478 8.4628C9.81542 8.4628 9.5343 9.89207 9.5343 11.3711V16.9863H6.01336V5.64551H9.39344V7.19247H9.44262C9.91317 6.3013 11.0625 5.36099 12.7772 5.36099C16.3443 5.36099 17 7.70813 17 10.7566V16.9863H16.997Z" , fill: "white", fillOpacity: "1",} ) }) ) , String(_nullishCoalesce(_optionalChain([item, 'optionalAccess', _277 => _277.Title]), () => ( ""))) !== "LinkedIn" && _jsxruntime.jsx.call(void 0, 'div', { className: `icon-share icon-deree-icon-${_nullishCoalesce(_optionalChain([item, 'optionalAccess', _278 => _278.Slug]), () => ( ""))}`,}) ]}) }, _nullishCoalesce(_optionalChain([item, 'optionalAccess', _272 => _272.Id]), () => ( i))) )) }) }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "col-12 pl-0 pr-0 col-lg-8" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "logos pr-lg-20 pr-xxl-0" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "right flex-wrap" , children: FooterLogos.map((item, i) => ( _jsxruntime.jsxs.call(void 0, 'a', { className: _optionalChain([item, 'optionalAccess', _280 => _280.Slug]), href: _optionalChain([item, 'optionalAccess', _281 => _281.ArticleLinkUrl]), target: "_blank", children: [ _optionalChain([item, 'optionalAccess', _282 => _282._embedded, 'optionalAccess', _283 => _283.Picture, 'optionalAccess', _284 => _284.SourcePath]) && _jsxruntime.jsx.call(void 0, 'img', { src: item._embedded.Picture.SourcePath, height: "100%", width: "80", alt: _optionalChain([item, 'optionalAccess', _285 => _285.Title]),} ) , _jsxruntime.jsx.call(void 0, 'span', { children: _optionalChain([item, 'optionalAccess', _286 => _286.Title])}) ]}, _nullishCoalesce(_optionalChain([item, 'optionalAccess', _279 => _279.Id]), () => ( i))) )) }) }) }) ]}) }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "footerBelow bg-background" , children: _jsxruntime.jsx.call(void 0, 'div', { className: "container", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "row", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "col-12 col-lg-4 copy order-2 order-lg-1" , children: _jsxruntime.jsxs.call(void 0, 'p', { children: ["Copyright © " , new Date().getFullYear()]}) }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "col-12 col-lg-4 text-center terms order-1 order-lg-2" , children: [ _jsxruntime.jsx.call(void 0, 'a', { href: "javascript:void(0)", children: "Privacy Policy" }) , _jsxruntime.jsx.call(void 0, 'a', { href: "javascript:void(0)", children: "Terms of Use" }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "col-12 col-lg-4 order-3 text-right credits" , children: _jsxruntime.jsxs.call(void 0, 'p', { className: "d-flex align-items-center" , children: ["Website by" , _jsxruntime.jsx.call(void 0, 'a', { href: "https://backbone.digital", target: "_blank", style: { paddingLeft: "5px", paddingTop: "2px" } , title: "BACKBONE | Full Service Digital Transformation Consultancy" , children: _jsxruntime.jsx.call(void 0, 'span', { children: "BACKBONE"}) }) , _jsxruntime.jsx.call(void 0, 'span', { style: { paddingLeft: "5px", paddingRight: "5px", fontWeight: "normal" } , children: "on"}) , _jsxruntime.jsx.call(void 0, 'a', { href: "https://expresia.com/", target: "_blank", children: _jsxruntime.jsx.call(void 0, 'img', { src: "/media/expresia_logo.svg", width: "80", title: "expresia.com | Digital Experience Platform" , alt: "expresia.com | Digital Experience Platform" , className: "", 'data-xpr-static': "",} ) }) ]}) }) ]}) }) }) , _jsxruntime.jsx.call(void 0, 'div', { className: "footerScroll", children: _jsxruntime.jsx.call(void 0, 'button', { type: "button", className: "btn-to-top icon icon-arrow-down" , onClick: (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); // Control.js scrollTop() } , }) }) , _jsxruntime.jsx.call(void 0, FooterVideoModal, {} ) ]}) ); } // @end-compose Footer function PlaylistWithSidebarTemplate({ playlists, sitemap, section, PlaylistsRenderer }) { const router = _router.useRouter.call(void 0, ); const lang = useXprLanguage(); const page = dereePageMode(sitemap, section, _optionalChain([router, 'optionalAccess', _287 => _287.asPath])); // Footer Libs' "hack for injected playlists" on these six sections: css/global drops .content's top padding from // 1024px up under .injectedPlaylists, as the legacy inline style did (templates.json sectionBodyClasses). const bodyClass = ["page page-sidebar", ["7551","7601","7602","7552","7603","7604"].includes(String(_nullishCoalesce(_optionalChain([section, 'optionalAccess', _288 => _288.Id]), () => ( "")))) && "injectedPlaylists"].filter(Boolean).join(" "); useDereeBodyClasses(bodyClass); return ( _jsxruntime.jsxs.call(void 0, 'div', { className: bodyClass || undefined, children: [ _jsxruntime.jsx.call(void 0, MobileNav, { lang: lang, sitemap: sitemap,} ) , _jsxruntime.jsxs.call(void 0, 'div', { className: "mm-page", children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "innerPageHeader", children: _jsxruntime.jsx.call(void 0, Nav, { section: section, lang: lang, sitemap: sitemap,} ) }) , _jsxruntime.jsxs.call(void 0, 'div', { className: "innerPage", children: [ String(_nullishCoalesce(_optionalChain([section, 'optionalAccess', _289 => _289.Id]), () => ( ""))) !== "7" && _jsxruntime.jsx.call(void 0, Breadcrumb, { trail: page.path, detailSlug: page.detail ? page.slug : null,} ) , _jsxruntime.jsx.call(void 0, 'div', { className: "grayLeftWhiteRightLayout", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "layoutWrapper", children: [ _jsxruntime.jsx.call(void 0, Sidebar1Level, { trail: page.path, section: section,} ) , _jsxruntime.jsx.call(void 0, 'div', { className: "content", children: _jsxruntime.jsx.call(void 0, 'main', { className: "min-h-[100svh]", children: _jsxruntime.jsx.call(void 0, PlaylistsRenderer, {} ) }) }) ]}) }) ]}) , _jsxruntime.jsx.call(void 0, NextSection, { section: section,} ) , _jsxruntime.jsx.call(void 0, Footer, { lang: lang, sitemap: sitemap,} ) ]}) ]}) ); } exports.default = PlaylistWithSidebarTemplate;

Tuition & Fees Session
Tuition
Session Tuition (per credit)	$ 420
Other Fees
Late registration fee	$ 30
Change of course fee	$ 20
Summer Session/Summer Term Learning Resources Fee	$ 12
Laboratory Tuition (per lab unit)	$ 89
Resit fee	$ 30
Lost ID fee	$ 15