diff --git a/course/format/amd/build/local/content.min.js b/course/format/amd/build/local/content.min.js
index 8ce88b40c03..78d2ea6bab1 100644
--- a/course/format/amd/build/local/content.min.js
+++ b/course/format/amd/build/local/content.min.js
@@ -6,6 +6,6 @@ define("core_courseformat/local/content",["exports","core/reactive","core/utils"
    * @class      core_courseformat/local/content
    * @copyright  2020 Ferran Recio <ferran@moodle.com>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_config=_interopRequireDefault(_config),_inplace_editable=_interopRequireDefault(_inplace_editable),_section=_interopRequireDefault(_section),_cmitem=_interopRequireDefault(_cmitem),_fragment=_interopRequireDefault(_fragment),_templates=_interopRequireDefault(_templates),_actions=_interopRequireDefault(_actions),CourseEvents=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(CourseEvents),_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);class Component extends _reactive.BaseComponent{create(descriptor){var _descriptor$sectionRe;this.name="course_format",this.selectors={SECTION:"[data-for='section']",SECTION_ITEM:"[data-for='section_title']",SECTION_CMLIST:"[data-for='cmlist']",COURSE_SECTIONLIST:"[data-for='course_sectionlist']",CM:"[data-for='cmitem']",PAGE:"#page",TOGGLER:'[data-action="togglecoursecontentsection"]',COLLAPSE:'[data-toggle="collapse"]',TOGGLEALL:'[data-toggle="toggleall"]',ACTIVITYTAG:"li",SECTIONTAG:"li"},this.classes={COLLAPSED:"collapsed",ACTIVITY:"activity",STATEDREADY:"stateready",SECTION:"section"},this.dettachedCms={},this.dettachedSections={},this.sections={},this.cms={},this.sectionReturn=null!==(_descriptor$sectionRe=descriptor.sectionReturn)&&void 0!==_descriptor$sectionRe?_descriptor$sectionRe:0,this.debouncedReloads=new Map}static init(target,selectors,sectionReturn){return new Component({element:document.getElementById(target),reactive:(0,_courseeditor.getCurrentCourseEditor)(),selectors:selectors,sectionReturn:sectionReturn})}stateReady(state){this._indexContents(),this.addEventListener(this.element,"click",this._sectionTogglers);const toogleAll=this.getElement(this.selectors.TOGGLEALL);if(toogleAll){const collapseElementIds=[...this.getElements(this.selectors.COLLAPSE)].map((element=>element.id));toogleAll.setAttribute("aria-controls",collapseElementIds.join(" ")),this.addEventListener(toogleAll,"click",this._allSectionToggler),this.addEventListener(toogleAll,"keydown",(e=>{" "===e.key&&this._allSectionToggler(e)})),this._refreshAllSectionsToggler(state)}this.reactive.supportComponents&&(this.reactive.isEditing&&new _actions.default(this),this.element.classList.add(this.classes.STATEDREADY)),this.addEventListener(this.element,CourseEvents.manualCompletionToggled,this._completionHandler),this.addEventListener(document.querySelector(this.selectors.PAGE),"scroll",this._scrollHandler)}_sectionTogglers(event){const sectionlink=event.target.closest(this.selectors.TOGGLER),closestCollapse=event.target.closest(this.selectors.COLLAPSE),isChevron=null==closestCollapse?void 0:closestCollapse.closest(this.selectors.SECTION_ITEM);if(sectionlink||isChevron){var _toggler$classList$co;const section=event.target.closest(this.selectors.SECTION),toggler=section.querySelector(this.selectors.COLLAPSE),isCollapsed=null!==(_toggler$classList$co=null==toggler?void 0:toggler.classList.contains(this.classes.COLLAPSED))&&void 0!==_toggler$classList$co&&_toggler$classList$co;if(isChevron||isCollapsed){const sectionId=section.getAttribute("data-id");this.reactive.dispatch("sectionContentCollapsed",[sectionId],!isCollapsed)}}}_allSectionToggler(event){var _course$sectionlist;event.preventDefault();const isAllCollapsed=event.target.closest(this.selectors.TOGGLEALL).classList.contains(this.classes.COLLAPSED),course=this.reactive.get("course");this.reactive.dispatch("sectionContentCollapsed",null!==(_course$sectionlist=course.sectionlist)&&void 0!==_course$sectionlist?_course$sectionlist:[],!isAllCollapsed)}getWatchers(){return this.reactive.sectionReturn=this.sectionReturn,this.reactive.supportComponents?[{watch:"cm.visible:updated",handler:this._reloadCm},{watch:"cm.stealth:updated",handler:this._reloadCm},{watch:"cm.sectionid:updated",handler:this._reloadCm},{watch:"cm.indent:updated",handler:this._reloadCm},{watch:"cm.groupmode:updated",handler:this._reloadCm},{watch:"section.number:updated",handler:this._refreshSectionNumber},{watch:"section.contentcollapsed:updated",handler:this._refreshSectionCollapsed},{watch:"transaction:start",handler:this._startProcessing},{watch:"course.sectionlist:updated",handler:this._refreshCourseSectionlist},{watch:"section.cmlist:updated",handler:this._refreshSectionCmlist},{watch:"state:updated",handler:this._indexContents}]:[]}_refreshSectionCollapsed(_ref){var _toggler$classList$co2;let{state:state,element:element}=_ref;const target=this.getElement(this.selectors.SECTION,element.id);if(!target)throw new Error("Unknown section with ID ".concat(element.id));const toggler=target.querySelector(this.selectors.COLLAPSE),isCollapsed=null!==(_toggler$classList$co2=null==toggler?void 0:toggler.classList.contains(this.classes.COLLAPSED))&&void 0!==_toggler$classList$co2&&_toggler$classList$co2;if(element.contentcollapsed!==isCollapsed){var _toggler$dataset$targ;let collapsibleId=null!==(_toggler$dataset$targ=toggler.dataset.target)&&void 0!==_toggler$dataset$targ?_toggler$dataset$targ:toggler.getAttribute("href");if(!collapsibleId)return;collapsibleId=collapsibleId.replace("#","");const collapsible=document.getElementById(collapsibleId);if(!collapsible)return;(0,_jquery.default)(collapsible).collapse(element.contentcollapsed?"hide":"show")}this._refreshAllSectionsToggler(state)}_refreshAllSectionsToggler(state){const target=this.getElement(this.selectors.TOGGLEALL);if(!target)return;let allcollapsed=!0,allexpanded=!0;state.section.forEach((section=>{allcollapsed=allcollapsed&&section.contentcollapsed,allexpanded=allexpanded&&!section.contentcollapsed})),allcollapsed&&(target.classList.add(this.classes.COLLAPSED),target.setAttribute("aria-expanded",!1)),allexpanded&&(target.classList.remove(this.classes.COLLAPSED),target.setAttribute("aria-expanded",!0))}_startProcessing(){this.dettachedCms={},this.dettachedSections={}}_completionHandler(_ref2){let{detail:detail}=_ref2;void 0!==detail&&this.reactive.dispatch("cmCompletion",[detail.cmid],detail.completed)}_scrollHandler(){const pageOffset=document.querySelector(this.selectors.PAGE).scrollTop,items=this.reactive.getExporter().allItemsArray(this.reactive.state);let pageItem=null;items.every((item=>{const index="section"===item.type?this.sections:this.cms;if(void 0===index[item.id])return!0;const element=index[item.id].element;return pageItem=item,pageOffset>=element.offsetTop})),pageItem&&this.reactive.dispatch("setPageItem",pageItem.type,pageItem.id)}_refreshSectionNumber(_ref3){let{element:element}=_ref3;const target=this.getElement(this.selectors.SECTION,element.id);if(!target)return;target.id="section-".concat(element.number),target.dataset.sectionid=element.number,target.dataset.number=element.number;const inplace=_inplace_editable.default.getInplaceEditable(target.querySelector(this.selectors.SECTION_ITEM));if(inplace){const currentvalue=inplace.getValue(),currentitemid=inplace.getItemId();""===inplace.getValue()&&(currentitemid!=element.id||currentvalue==element.rawtitle&&""!=element.rawtitle||inplace.setValue(element.rawtitle))}}_refreshSectionCmlist(_ref4){var _element$cmlist;let{element:element}=_ref4;const cmlist=null!==(_element$cmlist=element.cmlist)&&void 0!==_element$cmlist?_element$cmlist:[],section=this.getElement(this.selectors.SECTION,element.id),listparent=null==section?void 0:section.querySelector(this.selectors.SECTION_CMLIST),createCm=this._createCmItem.bind(this);listparent&&this._fixOrder(listparent,cmlist,this.selectors.CM,this.dettachedCms,createCm)}_refreshCourseSectionlist(_ref5){var _element$sectionlist;let{element:element}=_ref5;if(0!=this.reactive.sectionReturn)return;const sectionlist=null!==(_element$sectionlist=element.sectionlist)&&void 0!==_element$sectionlist?_element$sectionlist:[],listparent=this.getElement(this.selectors.COURSE_SECTIONLIST),createSection=this._createSectionItem.bind(this);listparent&&this._fixOrder(listparent,sectionlist,this.selectors.SECTION,this.dettachedSections,createSection)}_indexContents(){this._scanIndex(this.selectors.SECTION,this.sections,(item=>new _section.default(item))),this._scanIndex(this.selectors.CM,this.cms,(item=>new _cmitem.default(item)))}_scanIndex(selector,index,creationhandler){this.getElements("".concat(selector,":not([data-indexed])")).forEach((item=>{var _item$dataset;null!=item&&null!==(_item$dataset=item.dataset)&&void 0!==_item$dataset&&_item$dataset.id&&(void 0!==index[item.dataset.id]&&index[item.dataset.id].unregister(),index[item.dataset.id]=creationhandler({...this,element:item}),item.dataset.indexed=!0)}))}_reloadCm(_ref6){let{element:element}=_ref6;if(!this.getElement(this.selectors.CM,element.id))return;this._getDebouncedReloadCm(element.id)()}_getDebouncedReloadCm(cmId){const pendingKey="courseformat/content:reloadCm_".concat(cmId);let debouncedReload=this.debouncedReloads.get(pendingKey);if(debouncedReload)return debouncedReload;const pendingReload=new _pending.default(pendingKey);return debouncedReload=(0,_utils.debounce)((()=>{var _this$reactive$sectio;this.debouncedReloads.delete(pendingKey);const cmitem=this.getElement(this.selectors.CM,cmId);if(!cmitem)return;_fragment.default.loadFragment("core_courseformat","cmitem",_config.default.courseContextId,{id:cmId,courseid:_config.default.courseId,sr:null!==(_this$reactive$sectio=this.reactive.sectionReturn)&&void 0!==_this$reactive$sectio?_this$reactive$sectio:0}).then(((html,js)=>{_templates.default.replaceNode(cmitem,html,js),this._indexContents(),pendingReload.resolve()})).catch()}),200),this.debouncedReloads.set(pendingKey,debouncedReload),debouncedReload}_reloadSection(_ref7){let{element:element}=_ref7;const pendingReload=new _pending.default("courseformat/content:reloadSection_".concat(element.id)),sectionitem=this.getElement(this.selectors.SECTION,element.id);if(sectionitem){var _this$reactive$sectio2;_fragment.default.loadFragment("core_courseformat","section",_config.default.courseContextId,{id:element.id,courseid:_config.default.courseId,sr:null!==(_this$reactive$sectio2=this.reactive.sectionReturn)&&void 0!==_this$reactive$sectio2?_this$reactive$sectio2:0}).then(((html,js)=>{_templates.default.replaceNode(sectionitem,html,js),this._indexContents(),pendingReload.resolve()})).catch()}}_createCmItem(container,cmid){const newItem=document.createElement(this.selectors.ACTIVITYTAG);return newItem.dataset.for="cmitem",newItem.dataset.id=cmid,newItem.id="module-".concat(cmid),newItem.classList.add(this.classes.ACTIVITY),container.append(newItem),this._reloadCm({element:this.reactive.get("cm",cmid)}),newItem}_createSectionItem(container,sectionid){const section=this.reactive.get("section",sectionid),newItem=document.createElement(this.selectors.SECTIONTAG);return newItem.dataset.for="section",newItem.dataset.id=sectionid,newItem.dataset.number=section.number,newItem.id="section-".concat(sectionid),newItem.classList.add(this.classes.SECTION),container.append(newItem),this._reloadSection({element:section}),newItem}async _fixOrder(container,neworder,selector,dettachedelements,createMethod){if(void 0===container)return;if(!neworder.length)return container.classList.add("hidden"),void(container.innerHTML="");let dndFakeActivity;for(container.classList.remove("hidden"),neworder.forEach(((itemid,index)=>{var _ref8,_this$getElement;let item=null!==(_ref8=null!==(_this$getElement=this.getElement(selector,itemid))&&void 0!==_this$getElement?_this$getElement:dettachedelements[itemid])&&void 0!==_ref8?_ref8:createMethod(container,itemid);if(void 0===item)return;const currentitem=container.children[index];void 0!==currentitem?currentitem!==item&&container.insertBefore(item,currentitem):container.append(item)}));container.children.length>neworder.length;){var _lastchild$classList;const lastchild=container.lastChild;var _lastchild$dataset$id,_lastchild$dataset;if(null!=lastchild&&null!==(_lastchild$classList=lastchild.classList)&&void 0!==_lastchild$classList&&_lastchild$classList.contains("dndupload-preview"))dndFakeActivity=lastchild;else dettachedelements[null!==(_lastchild$dataset$id=null==lastchild||null===(_lastchild$dataset=lastchild.dataset)||void 0===_lastchild$dataset?void 0:_lastchild$dataset.id)&&void 0!==_lastchild$dataset$id?_lastchild$dataset$id:0]=lastchild;container.removeChild(lastchild)}dndFakeActivity&&container.append(dndFakeActivity)}}return _exports.default=Component,_exports.default}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_config=_interopRequireDefault(_config),_inplace_editable=_interopRequireDefault(_inplace_editable),_section=_interopRequireDefault(_section),_cmitem=_interopRequireDefault(_cmitem),_fragment=_interopRequireDefault(_fragment),_templates=_interopRequireDefault(_templates),_actions=_interopRequireDefault(_actions),CourseEvents=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(CourseEvents),_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);class Component extends _reactive.BaseComponent{create(descriptor){var _descriptor$sectionRe;this.name="course_format",this.selectors={SECTION:"[data-for='section']",SECTION_ITEM:"[data-for='section_title']",SECTION_CMLIST:"[data-for='cmlist']",COURSE_SECTIONLIST:"[data-for='course_sectionlist']",CM:"[data-for='cmitem']",TOGGLER:'[data-action="togglecoursecontentsection"]',COLLAPSE:'[data-toggle="collapse"]',TOGGLEALL:'[data-toggle="toggleall"]',ACTIVITYTAG:"li",SECTIONTAG:"li"},this.classes={COLLAPSED:"collapsed",ACTIVITY:"activity",STATEDREADY:"stateready",SECTION:"section"},this.dettachedCms={},this.dettachedSections={},this.sections={},this.cms={},this.sectionReturn=null!==(_descriptor$sectionRe=descriptor.sectionReturn)&&void 0!==_descriptor$sectionRe?_descriptor$sectionRe:0,this.debouncedReloads=new Map}static init(target,selectors,sectionReturn){return new Component({element:document.getElementById(target),reactive:(0,_courseeditor.getCurrentCourseEditor)(),selectors:selectors,sectionReturn:sectionReturn})}stateReady(state){this._indexContents(),this.addEventListener(this.element,"click",this._sectionTogglers);const toogleAll=this.getElement(this.selectors.TOGGLEALL);if(toogleAll){const collapseElementIds=[...this.getElements(this.selectors.COLLAPSE)].map((element=>element.id));toogleAll.setAttribute("aria-controls",collapseElementIds.join(" ")),this.addEventListener(toogleAll,"click",this._allSectionToggler),this.addEventListener(toogleAll,"keydown",(e=>{" "===e.key&&this._allSectionToggler(e)})),this._refreshAllSectionsToggler(state)}this.reactive.supportComponents&&(this.reactive.isEditing&&new _actions.default(this),this.element.classList.add(this.classes.STATEDREADY)),this.addEventListener(this.element,CourseEvents.manualCompletionToggled,this._completionHandler),this.addEventListener(document,"scroll",this._scrollHandler),setTimeout((()=>{this._scrollHandler()}),500)}_sectionTogglers(event){const sectionlink=event.target.closest(this.selectors.TOGGLER),closestCollapse=event.target.closest(this.selectors.COLLAPSE),isChevron=null==closestCollapse?void 0:closestCollapse.closest(this.selectors.SECTION_ITEM);if(sectionlink||isChevron){var _toggler$classList$co;const section=event.target.closest(this.selectors.SECTION),toggler=section.querySelector(this.selectors.COLLAPSE),isCollapsed=null!==(_toggler$classList$co=null==toggler?void 0:toggler.classList.contains(this.classes.COLLAPSED))&&void 0!==_toggler$classList$co&&_toggler$classList$co;if(isChevron||isCollapsed){const sectionId=section.getAttribute("data-id");this.reactive.dispatch("sectionContentCollapsed",[sectionId],!isCollapsed)}}}_allSectionToggler(event){var _course$sectionlist;event.preventDefault();const isAllCollapsed=event.target.closest(this.selectors.TOGGLEALL).classList.contains(this.classes.COLLAPSED),course=this.reactive.get("course");this.reactive.dispatch("sectionContentCollapsed",null!==(_course$sectionlist=course.sectionlist)&&void 0!==_course$sectionlist?_course$sectionlist:[],!isAllCollapsed)}getWatchers(){return this.reactive.sectionReturn=this.sectionReturn,this.reactive.supportComponents?[{watch:"cm.visible:updated",handler:this._reloadCm},{watch:"cm.stealth:updated",handler:this._reloadCm},{watch:"cm.sectionid:updated",handler:this._reloadCm},{watch:"cm.indent:updated",handler:this._reloadCm},{watch:"cm.groupmode:updated",handler:this._reloadCm},{watch:"section.number:updated",handler:this._refreshSectionNumber},{watch:"section.contentcollapsed:updated",handler:this._refreshSectionCollapsed},{watch:"transaction:start",handler:this._startProcessing},{watch:"course.sectionlist:updated",handler:this._refreshCourseSectionlist},{watch:"section.cmlist:updated",handler:this._refreshSectionCmlist},{watch:"state:updated",handler:this._indexContents}]:[]}_refreshSectionCollapsed(_ref){var _toggler$classList$co2;let{state:state,element:element}=_ref;const target=this.getElement(this.selectors.SECTION,element.id);if(!target)throw new Error("Unknown section with ID ".concat(element.id));const toggler=target.querySelector(this.selectors.COLLAPSE),isCollapsed=null!==(_toggler$classList$co2=null==toggler?void 0:toggler.classList.contains(this.classes.COLLAPSED))&&void 0!==_toggler$classList$co2&&_toggler$classList$co2;if(element.contentcollapsed!==isCollapsed){var _toggler$dataset$targ;let collapsibleId=null!==(_toggler$dataset$targ=toggler.dataset.target)&&void 0!==_toggler$dataset$targ?_toggler$dataset$targ:toggler.getAttribute("href");if(!collapsibleId)return;collapsibleId=collapsibleId.replace("#","");const collapsible=document.getElementById(collapsibleId);if(!collapsible)return;(0,_jquery.default)(collapsible).collapse(element.contentcollapsed?"hide":"show")}this._refreshAllSectionsToggler(state)}_refreshAllSectionsToggler(state){const target=this.getElement(this.selectors.TOGGLEALL);if(!target)return;let allcollapsed=!0,allexpanded=!0;state.section.forEach((section=>{allcollapsed=allcollapsed&&section.contentcollapsed,allexpanded=allexpanded&&!section.contentcollapsed})),allcollapsed&&(target.classList.add(this.classes.COLLAPSED),target.setAttribute("aria-expanded",!1)),allexpanded&&(target.classList.remove(this.classes.COLLAPSED),target.setAttribute("aria-expanded",!0))}_startProcessing(){this.dettachedCms={},this.dettachedSections={}}_completionHandler(_ref2){let{detail:detail}=_ref2;void 0!==detail&&this.reactive.dispatch("cmCompletion",[detail.cmid],detail.completed)}_scrollHandler(){const pageOffset=window.scrollY,items=this.reactive.getExporter().allItemsArray(this.reactive.state);let pageItem=null;items.every((item=>{const index="section"===item.type?this.sections:this.cms;if(void 0===index[item.id])return!0;const element=index[item.id].element;return pageItem=item,pageOffset>=element.offsetTop})),pageItem&&this.reactive.dispatch("setPageItem",pageItem.type,pageItem.id)}_refreshSectionNumber(_ref3){let{element:element}=_ref3;const target=this.getElement(this.selectors.SECTION,element.id);if(!target)return;target.id="section-".concat(element.number),target.dataset.sectionid=element.number,target.dataset.number=element.number;const inplace=_inplace_editable.default.getInplaceEditable(target.querySelector(this.selectors.SECTION_ITEM));if(inplace){const currentvalue=inplace.getValue(),currentitemid=inplace.getItemId();""===inplace.getValue()&&(currentitemid!=element.id||currentvalue==element.rawtitle&&""!=element.rawtitle||inplace.setValue(element.rawtitle))}}_refreshSectionCmlist(_ref4){var _element$cmlist;let{element:element}=_ref4;const cmlist=null!==(_element$cmlist=element.cmlist)&&void 0!==_element$cmlist?_element$cmlist:[],section=this.getElement(this.selectors.SECTION,element.id),listparent=null==section?void 0:section.querySelector(this.selectors.SECTION_CMLIST),createCm=this._createCmItem.bind(this);listparent&&this._fixOrder(listparent,cmlist,this.selectors.CM,this.dettachedCms,createCm)}_refreshCourseSectionlist(_ref5){var _element$sectionlist;let{element:element}=_ref5;if(0!=this.reactive.sectionReturn)return;const sectionlist=null!==(_element$sectionlist=element.sectionlist)&&void 0!==_element$sectionlist?_element$sectionlist:[],listparent=this.getElement(this.selectors.COURSE_SECTIONLIST),createSection=this._createSectionItem.bind(this);listparent&&this._fixOrder(listparent,sectionlist,this.selectors.SECTION,this.dettachedSections,createSection)}_indexContents(){this._scanIndex(this.selectors.SECTION,this.sections,(item=>new _section.default(item))),this._scanIndex(this.selectors.CM,this.cms,(item=>new _cmitem.default(item)))}_scanIndex(selector,index,creationhandler){this.getElements("".concat(selector,":not([data-indexed])")).forEach((item=>{var _item$dataset;null!=item&&null!==(_item$dataset=item.dataset)&&void 0!==_item$dataset&&_item$dataset.id&&(void 0!==index[item.dataset.id]&&index[item.dataset.id].unregister(),index[item.dataset.id]=creationhandler({...this,element:item}),item.dataset.indexed=!0)}))}_reloadCm(_ref6){let{element:element}=_ref6;if(!this.getElement(this.selectors.CM,element.id))return;this._getDebouncedReloadCm(element.id)()}_getDebouncedReloadCm(cmId){const pendingKey="courseformat/content:reloadCm_".concat(cmId);let debouncedReload=this.debouncedReloads.get(pendingKey);if(debouncedReload)return debouncedReload;const pendingReload=new _pending.default(pendingKey);return debouncedReload=(0,_utils.debounce)((()=>{var _this$reactive$sectio;this.debouncedReloads.delete(pendingKey);const cmitem=this.getElement(this.selectors.CM,cmId);if(!cmitem)return;_fragment.default.loadFragment("core_courseformat","cmitem",_config.default.courseContextId,{id:cmId,courseid:_config.default.courseId,sr:null!==(_this$reactive$sectio=this.reactive.sectionReturn)&&void 0!==_this$reactive$sectio?_this$reactive$sectio:0}).then(((html,js)=>{_templates.default.replaceNode(cmitem,html,js),this._indexContents(),pendingReload.resolve()})).catch()}),200),this.debouncedReloads.set(pendingKey,debouncedReload),debouncedReload}_reloadSection(_ref7){let{element:element}=_ref7;const pendingReload=new _pending.default("courseformat/content:reloadSection_".concat(element.id)),sectionitem=this.getElement(this.selectors.SECTION,element.id);if(sectionitem){var _this$reactive$sectio2;_fragment.default.loadFragment("core_courseformat","section",_config.default.courseContextId,{id:element.id,courseid:_config.default.courseId,sr:null!==(_this$reactive$sectio2=this.reactive.sectionReturn)&&void 0!==_this$reactive$sectio2?_this$reactive$sectio2:0}).then(((html,js)=>{_templates.default.replaceNode(sectionitem,html,js),this._indexContents(),pendingReload.resolve()})).catch()}}_createCmItem(container,cmid){const newItem=document.createElement(this.selectors.ACTIVITYTAG);return newItem.dataset.for="cmitem",newItem.dataset.id=cmid,newItem.id="module-".concat(cmid),newItem.classList.add(this.classes.ACTIVITY),container.append(newItem),this._reloadCm({element:this.reactive.get("cm",cmid)}),newItem}_createSectionItem(container,sectionid){const section=this.reactive.get("section",sectionid),newItem=document.createElement(this.selectors.SECTIONTAG);return newItem.dataset.for="section",newItem.dataset.id=sectionid,newItem.dataset.number=section.number,newItem.id="section-".concat(sectionid),newItem.classList.add(this.classes.SECTION),container.append(newItem),this._reloadSection({element:section}),newItem}async _fixOrder(container,neworder,selector,dettachedelements,createMethod){if(void 0===container)return;if(!neworder.length)return container.classList.add("hidden"),void(container.innerHTML="");let dndFakeActivity;for(container.classList.remove("hidden"),neworder.forEach(((itemid,index)=>{var _ref8,_this$getElement;let item=null!==(_ref8=null!==(_this$getElement=this.getElement(selector,itemid))&&void 0!==_this$getElement?_this$getElement:dettachedelements[itemid])&&void 0!==_ref8?_ref8:createMethod(container,itemid);if(void 0===item)return;const currentitem=container.children[index];void 0!==currentitem?currentitem!==item&&container.insertBefore(item,currentitem):container.append(item)}));container.children.length>neworder.length;){var _lastchild$classList;const lastchild=container.lastChild;var _lastchild$dataset$id,_lastchild$dataset;if(null!=lastchild&&null!==(_lastchild$classList=lastchild.classList)&&void 0!==_lastchild$classList&&_lastchild$classList.contains("dndupload-preview"))dndFakeActivity=lastchild;else dettachedelements[null!==(_lastchild$dataset$id=null==lastchild||null===(_lastchild$dataset=lastchild.dataset)||void 0===_lastchild$dataset?void 0:_lastchild$dataset.id)&&void 0!==_lastchild$dataset$id?_lastchild$dataset$id:0]=lastchild;container.removeChild(lastchild)}dndFakeActivity&&container.append(dndFakeActivity)}}return _exports.default=Component,_exports.default}));
 
 //# sourceMappingURL=content.min.js.map
\ No newline at end of file
diff --git a/course/format/amd/build/local/content.min.js.map b/course/format/amd/build/local/content.min.js.map
index ccea308d572..eb1779159fe 100644
--- a/course/format/amd/build/local/content.min.js.map
+++ b/course/format/amd/build/local/content.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"content.min.js","sources":["../../src/local/content.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Course index main component.\n *\n * @module     core_courseformat/local/content\n * @class      core_courseformat/local/content\n * @copyright  2020 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {BaseComponent} from 'core/reactive';\nimport {debounce} from 'core/utils';\nimport {getCurrentCourseEditor} from 'core_courseformat/courseeditor';\nimport Config from 'core/config';\nimport inplaceeditable from 'core/inplace_editable';\nimport Section from 'core_courseformat/local/content/section';\nimport CmItem from 'core_courseformat/local/content/section/cmitem';\nimport Fragment from 'core/fragment';\nimport Templates from 'core/templates';\nimport DispatchActions from 'core_courseformat/local/content/actions';\nimport * as CourseEvents from 'core_course/events';\n// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.\nimport jQuery from 'jquery';\nimport Pending from 'core/pending';\n\nexport default class Component extends BaseComponent {\n\n    /**\n     * Constructor hook.\n     *\n     * @param {Object} descriptor the component descriptor\n     */\n    create(descriptor) {\n        // Optional component name for debugging.\n        this.name = 'course_format';\n        // Default query selectors.\n        this.selectors = {\n            SECTION: `[data-for='section']`,\n            SECTION_ITEM: `[data-for='section_title']`,\n            SECTION_CMLIST: `[data-for='cmlist']`,\n            COURSE_SECTIONLIST: `[data-for='course_sectionlist']`,\n            CM: `[data-for='cmitem']`,\n            PAGE: `#page`,\n            TOGGLER: `[data-action=\"togglecoursecontentsection\"]`,\n            COLLAPSE: `[data-toggle=\"collapse\"]`,\n            TOGGLEALL: `[data-toggle=\"toggleall\"]`,\n            // Formats can override the activity tag but a default one is needed to create new elements.\n            ACTIVITYTAG: 'li',\n            SECTIONTAG: 'li',\n        };\n        // Default classes to toggle on refresh.\n        this.classes = {\n            COLLAPSED: `collapsed`,\n            // Course content classes.\n            ACTIVITY: `activity`,\n            STATEDREADY: `stateready`,\n            SECTION: `section`,\n        };\n        // Array to save dettached elements during element resorting.\n        this.dettachedCms = {};\n        this.dettachedSections = {};\n        // Index of sections and cms components.\n        this.sections = {};\n        this.cms = {};\n        // The page section return.\n        this.sectionReturn = descriptor.sectionReturn ?? 0;\n        this.debouncedReloads = new Map();\n    }\n\n    /**\n     * Static method to create a component instance form the mustahce template.\n     *\n     * @param {string} target the DOM main element or its ID\n     * @param {object} selectors optional css selector overrides\n     * @param {number} sectionReturn the content section return\n     * @return {Component}\n     */\n    static init(target, selectors, sectionReturn) {\n        return new Component({\n            element: document.getElementById(target),\n            reactive: getCurrentCourseEditor(),\n            selectors,\n            sectionReturn,\n        });\n    }\n\n    /**\n     * Initial state ready method.\n     *\n     * @param {Object} state the state data\n     */\n    stateReady(state) {\n        this._indexContents();\n        // Activate section togglers.\n        this.addEventListener(this.element, 'click', this._sectionTogglers);\n\n        // Collapse/Expand all sections button.\n        const toogleAll = this.getElement(this.selectors.TOGGLEALL);\n        if (toogleAll) {\n\n            // Ensure collapse menu button adds aria-controls attribute referring to each collapsible element.\n            const collapseElements = this.getElements(this.selectors.COLLAPSE);\n            const collapseElementIds = [...collapseElements].map(element => element.id);\n            toogleAll.setAttribute('aria-controls', collapseElementIds.join(' '));\n\n            this.addEventListener(toogleAll, 'click', this._allSectionToggler);\n            this.addEventListener(toogleAll, 'keydown', e => {\n                // Collapse/expand all sections when Space key is pressed on the toggle button.\n                if (e.key === ' ') {\n                    this._allSectionToggler(e);\n                }\n            });\n            this._refreshAllSectionsToggler(state);\n        }\n\n        if (this.reactive.supportComponents) {\n            // Actions are only available in edit mode.\n            if (this.reactive.isEditing) {\n                new DispatchActions(this);\n            }\n\n            // Mark content as state ready.\n            this.element.classList.add(this.classes.STATEDREADY);\n        }\n\n        // Capture completion events.\n        this.addEventListener(\n            this.element,\n            CourseEvents.manualCompletionToggled,\n            this._completionHandler\n        );\n\n        // Capture page scroll to update page item.\n        this.addEventListener(\n            document.querySelector(this.selectors.PAGE),\n            \"scroll\",\n            this._scrollHandler\n        );\n    }\n\n    /**\n     * Setup sections toggler.\n     *\n     * Toggler click is delegated to the main course content element because new sections can\n     * appear at any moment and this way we prevent accidental double bindings.\n     *\n     * @param {Event} event the triggered event\n     */\n    _sectionTogglers(event) {\n        const sectionlink = event.target.closest(this.selectors.TOGGLER);\n        const closestCollapse = event.target.closest(this.selectors.COLLAPSE);\n        // Assume that chevron is the only collapse toggler in a section heading;\n        // I think this is the most efficient way to verify at the moment.\n        const isChevron = closestCollapse?.closest(this.selectors.SECTION_ITEM);\n\n        if (sectionlink || isChevron) {\n\n            const section = event.target.closest(this.selectors.SECTION);\n            const toggler = section.querySelector(this.selectors.COLLAPSE);\n            const isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;\n\n            if (isChevron || isCollapsed) {\n                // Update the state.\n                const sectionId = section.getAttribute('data-id');\n                this.reactive.dispatch(\n                    'sectionContentCollapsed',\n                    [sectionId],\n                    !isCollapsed\n                );\n            }\n        }\n    }\n\n    /**\n     * Handle the collapse/expand all sections button.\n     *\n     * Toggler click is delegated to the main course content element because new sections can\n     * appear at any moment and this way we prevent accidental double bindings.\n     *\n     * @param {Event} event the triggered event\n     */\n    _allSectionToggler(event) {\n        event.preventDefault();\n\n        const target = event.target.closest(this.selectors.TOGGLEALL);\n        const isAllCollapsed = target.classList.contains(this.classes.COLLAPSED);\n\n        const course = this.reactive.get('course');\n        this.reactive.dispatch(\n            'sectionContentCollapsed',\n            course.sectionlist ?? [],\n            !isAllCollapsed\n        );\n    }\n\n    /**\n     * Return the component watchers.\n     *\n     * @returns {Array} of watchers\n     */\n    getWatchers() {\n        // Section return is a global page variable but most formats define it just before start printing\n        // the course content. This is the reason why we define this page setting here.\n        this.reactive.sectionReturn = this.sectionReturn;\n\n        // Check if the course format is compatible with reactive components.\n        if (!this.reactive.supportComponents) {\n            return [];\n        }\n        return [\n            // State changes that require to reload some course modules.\n            {watch: `cm.visible:updated`, handler: this._reloadCm},\n            {watch: `cm.stealth:updated`, handler: this._reloadCm},\n            {watch: `cm.sectionid:updated`, handler: this._reloadCm},\n            {watch: `cm.indent:updated`, handler: this._reloadCm},\n            {watch: `cm.groupmode:updated`, handler: this._reloadCm},\n            // Update section number and title.\n            {watch: `section.number:updated`, handler: this._refreshSectionNumber},\n            // Collapse and expand sections.\n            {watch: `section.contentcollapsed:updated`, handler: this._refreshSectionCollapsed},\n            // Sections and cm sorting.\n            {watch: `transaction:start`, handler: this._startProcessing},\n            {watch: `course.sectionlist:updated`, handler: this._refreshCourseSectionlist},\n            {watch: `section.cmlist:updated`, handler: this._refreshSectionCmlist},\n            // Reindex sections and cms.\n            {watch: `state:updated`, handler: this._indexContents},\n        ];\n    }\n\n    /**\n     * Update section collapsed state via bootstrap 4 if necessary.\n     *\n     * Formats that do not use bootstrap 4 must override this method in order to keep the section\n     * toggling working.\n     *\n     * @param {object} args\n     * @param {Object} args.state The state data\n     * @param {Object} args.element The element to update\n     */\n    _refreshSectionCollapsed({state, element}) {\n        const target = this.getElement(this.selectors.SECTION, element.id);\n        if (!target) {\n            throw new Error(`Unknown section with ID ${element.id}`);\n        }\n        // Check if it is already done.\n        const toggler = target.querySelector(this.selectors.COLLAPSE);\n        const isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;\n\n        if (element.contentcollapsed !== isCollapsed) {\n            let collapsibleId = toggler.dataset.target ?? toggler.getAttribute(\"href\");\n            if (!collapsibleId) {\n                return;\n            }\n            collapsibleId = collapsibleId.replace('#', '');\n            const collapsible = document.getElementById(collapsibleId);\n            if (!collapsible) {\n                return;\n            }\n\n            // Course index is based on Bootstrap 4 collapsibles. To collapse them we need jQuery to\n            // interact with collapsibles methods. Hopefully, this will change in Bootstrap 5 because\n            // it does not require jQuery anymore (when MDL-71979 is integrated).\n            jQuery(collapsible).collapse(element.contentcollapsed ? 'hide' : 'show');\n        }\n\n        this._refreshAllSectionsToggler(state);\n    }\n\n    /**\n     * Refresh the collapse/expand all sections element.\n     *\n     * @param {Object} state The state data\n     */\n    _refreshAllSectionsToggler(state) {\n        const target = this.getElement(this.selectors.TOGGLEALL);\n        if (!target) {\n            return;\n        }\n        // Check if we have all sections collapsed/expanded.\n        let allcollapsed = true;\n        let allexpanded = true;\n        state.section.forEach(\n            section => {\n                allcollapsed = allcollapsed && section.contentcollapsed;\n                allexpanded = allexpanded && !section.contentcollapsed;\n            }\n        );\n        if (allcollapsed) {\n            target.classList.add(this.classes.COLLAPSED);\n            target.setAttribute('aria-expanded', false);\n        }\n        if (allexpanded) {\n            target.classList.remove(this.classes.COLLAPSED);\n            target.setAttribute('aria-expanded', true);\n        }\n    }\n\n    /**\n     * Setup the component to start a transaction.\n     *\n     * Some of the course actions replaces the current DOM element with a new one before updating the\n     * course state. This means the component cannot preload any index properly until the transaction starts.\n     *\n     */\n    _startProcessing() {\n        // During a section or cm sorting, some elements could be dettached from the DOM and we\n        // need to store somewhare in case they are needed later.\n        this.dettachedCms = {};\n        this.dettachedSections = {};\n    }\n\n    /**\n     * Activity manual completion listener.\n     *\n     * @param {Event} event the custom ecent\n     */\n    _completionHandler({detail}) {\n        if (detail === undefined) {\n            return;\n        }\n        this.reactive.dispatch('cmCompletion', [detail.cmid], detail.completed);\n    }\n\n    /**\n     * Check the current page scroll and update the active element if necessary.\n     */\n    _scrollHandler() {\n        const pageOffset = document.querySelector(this.selectors.PAGE).scrollTop;\n        const items = this.reactive.getExporter().allItemsArray(this.reactive.state);\n        // Check what is the active element now.\n        let pageItem = null;\n        items.every(item => {\n            const index = (item.type === 'section') ? this.sections : this.cms;\n            if (index[item.id] === undefined) {\n                return true;\n            }\n\n            const element = index[item.id].element;\n            pageItem = item;\n            return pageOffset >= element.offsetTop;\n        });\n        if (pageItem) {\n            this.reactive.dispatch('setPageItem', pageItem.type, pageItem.id);\n        }\n    }\n\n    /**\n     * Update a course section when the section number changes.\n     *\n     * The courseActions module used for most course section tools still depends on css classes and\n     * section numbers (not id). To prevent inconsistencies when a section is moved, we need to refresh\n     * the\n     *\n     * Course formats can override the section title rendering so the frontend depends heavily on backend\n     * rendering. Luckily in edit mode we can trigger a title update using the inplace_editable module.\n     *\n     * @param {Object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSectionNumber({element}) {\n        // Find the element.\n        const target = this.getElement(this.selectors.SECTION, element.id);\n        if (!target) {\n            // Job done. Nothing to refresh.\n            return;\n        }\n        // Update section numbers in all data, css and YUI attributes.\n        target.id = `section-${element.number}`;\n        // YUI uses section number as section id in data-sectionid, in principle if a format use components\n        // don't need this sectionid attribute anymore, but we keep the compatibility in case some plugin\n        // use it for legacy purposes.\n        target.dataset.sectionid = element.number;\n        // The data-number is the attribute used by components to store the section number.\n        target.dataset.number = element.number;\n\n        // Update title and title inplace editable, if any.\n        const inplace = inplaceeditable.getInplaceEditable(target.querySelector(this.selectors.SECTION_ITEM));\n        if (inplace) {\n            // The course content HTML can be modified at any moment, so the function need to do some checkings\n            // to make sure the inplace editable still represents the same itemid.\n            const currentvalue = inplace.getValue();\n            const currentitemid = inplace.getItemId();\n            // Unnamed sections must be recalculated.\n            if (inplace.getValue() === '') {\n                // The value to send can be an empty value if it is a default name.\n                if (currentitemid == element.id && (currentvalue != element.rawtitle || element.rawtitle == '')) {\n                    inplace.setValue(element.rawtitle);\n                }\n            }\n        }\n    }\n\n    /**\n     * Refresh a section cm list.\n     *\n     * @param {Object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSectionCmlist({element}) {\n        const cmlist = element.cmlist ?? [];\n        const section = this.getElement(this.selectors.SECTION, element.id);\n        const listparent = section?.querySelector(this.selectors.SECTION_CMLIST);\n        // A method to create a fake element to be replaced when the item is ready.\n        const createCm = this._createCmItem.bind(this);\n        if (listparent) {\n            this._fixOrder(listparent, cmlist, this.selectors.CM, this.dettachedCms, createCm);\n        }\n    }\n\n    /**\n     * Refresh the section list.\n     *\n     * @param {Object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshCourseSectionlist({element}) {\n        // If we have a section return means we only show a single section so no need to fix order.\n        if (this.reactive.sectionReturn != 0) {\n            return;\n        }\n        const sectionlist = element.sectionlist ?? [];\n        const listparent = this.getElement(this.selectors.COURSE_SECTIONLIST);\n        // For now section cannot be created at a frontend level.\n        const createSection = this._createSectionItem.bind(this);\n        if (listparent) {\n            this._fixOrder(listparent, sectionlist, this.selectors.SECTION, this.dettachedSections, createSection);\n        }\n    }\n\n    /**\n     * Regenerate content indexes.\n     *\n     * This method is used when a legacy action refresh some content element.\n     */\n    _indexContents() {\n        // Find unindexed sections.\n        this._scanIndex(\n            this.selectors.SECTION,\n            this.sections,\n            (item) => {\n                return new Section(item);\n            }\n        );\n\n        // Find unindexed cms.\n        this._scanIndex(\n            this.selectors.CM,\n            this.cms,\n            (item) => {\n                return new CmItem(item);\n            }\n        );\n    }\n\n    /**\n     * Reindex a content (section or cm) of the course content.\n     *\n     * This method is used internally by _indexContents.\n     *\n     * @param {string} selector the DOM selector to scan\n     * @param {*} index the index attribute to update\n     * @param {*} creationhandler method to create a new indexed element\n     */\n    _scanIndex(selector, index, creationhandler) {\n        const items = this.getElements(`${selector}:not([data-indexed])`);\n        items.forEach((item) => {\n            if (!item?.dataset?.id) {\n                return;\n            }\n            // Delete previous item component.\n            if (index[item.dataset.id] !== undefined) {\n                index[item.dataset.id].unregister();\n            }\n            // Create the new component.\n            index[item.dataset.id] = creationhandler({\n                ...this,\n                element: item,\n            });\n            // Mark as indexed.\n            item.dataset.indexed = true;\n        });\n    }\n\n    /**\n     * Reload a course module contents.\n     *\n     * Most course module HTML is still strongly backend dependant.\n     * Some changes require to get a new version of the module.\n     *\n     * @param {object} param0 the watcher details\n     * @param {object} param0.element the state object\n     */\n    _reloadCm({element}) {\n        if (!this.getElement(this.selectors.CM, element.id)) {\n            return;\n        }\n        const debouncedReload = this._getDebouncedReloadCm(element.id);\n        debouncedReload();\n    }\n\n    /**\n     * Generate or get a reload CM debounced function.\n     * @param {Number} cmId\n     * @returns {Function} the debounced reload function\n     */\n    _getDebouncedReloadCm(cmId) {\n        const pendingKey = `courseformat/content:reloadCm_${cmId}`;\n        let debouncedReload = this.debouncedReloads.get(pendingKey);\n        if (debouncedReload) {\n            return debouncedReload;\n        }\n        const pendingReload = new Pending(pendingKey);\n        const reload = () => {\n            this.debouncedReloads.delete(pendingKey);\n            const cmitem = this.getElement(this.selectors.CM, cmId);\n            if (!cmitem) {\n                return;\n            }\n            const promise = Fragment.loadFragment(\n                'core_courseformat',\n                'cmitem',\n                Config.courseContextId,\n                {\n                    id: cmId,\n                    courseid: Config.courseId,\n                    sr: this.reactive.sectionReturn ?? 0,\n                }\n            );\n            promise.then((html, js) => {\n                Templates.replaceNode(cmitem, html, js);\n                this._indexContents();\n                pendingReload.resolve();\n                return;\n            }).catch();\n        };\n        debouncedReload = debounce(reload, 200);\n        this.debouncedReloads.set(pendingKey, debouncedReload);\n        return debouncedReload;\n    }\n\n    /**\n     * Reload a course section contents.\n     *\n     * Section HTML is still strongly backend dependant.\n     * Some changes require to get a new version of the section.\n     *\n     * @param {details} param0 the watcher details\n     * @param {object} param0.element the state object\n     */\n    _reloadSection({element}) {\n        const pendingReload = new Pending(`courseformat/content:reloadSection_${element.id}`);\n        const sectionitem = this.getElement(this.selectors.SECTION, element.id);\n        if (sectionitem) {\n            const promise = Fragment.loadFragment(\n                'core_courseformat',\n                'section',\n                Config.courseContextId,\n                {\n                    id: element.id,\n                    courseid: Config.courseId,\n                    sr: this.reactive.sectionReturn ?? 0,\n                }\n            );\n            promise.then((html, js) => {\n                Templates.replaceNode(sectionitem, html, js);\n                this._indexContents();\n                pendingReload.resolve();\n                return;\n            }).catch();\n        }\n    }\n\n    /**\n     * Create a new course module item in a section.\n     *\n     * Thos method will append a fake item in the container and trigger an ajax request to\n     * replace the fake element by the real content.\n     *\n     * @param {Element} container the container element (section)\n     * @param {Number} cmid the course-module ID\n     * @returns {Element} the created element\n     */\n    _createCmItem(container, cmid) {\n        const newItem = document.createElement(this.selectors.ACTIVITYTAG);\n        newItem.dataset.for = 'cmitem';\n        newItem.dataset.id = cmid;\n        // The legacy actions.js requires a specific ID and class to refresh the CM.\n        newItem.id = `module-${cmid}`;\n        newItem.classList.add(this.classes.ACTIVITY);\n        container.append(newItem);\n        this._reloadCm({\n            element: this.reactive.get('cm', cmid),\n        });\n        return newItem;\n    }\n\n    /**\n     * Create a new section item.\n     *\n     * This method will append a fake item in the container and trigger an ajax request to\n     * replace the fake element by the real content.\n     *\n     * @param {Element} container the container element (section)\n     * @param {Number} sectionid the course-module ID\n     * @returns {Element} the created element\n     */\n    _createSectionItem(container, sectionid) {\n        const section = this.reactive.get('section', sectionid);\n        const newItem = document.createElement(this.selectors.SECTIONTAG);\n        newItem.dataset.for = 'section';\n        newItem.dataset.id = sectionid;\n        newItem.dataset.number = section.number;\n        // The legacy actions.js requires a specific ID and class to refresh the section.\n        newItem.id = `section-${sectionid}`;\n        newItem.classList.add(this.classes.SECTION);\n        container.append(newItem);\n        this._reloadSection({\n            element: section,\n        });\n        return newItem;\n    }\n\n    /**\n     * Fix/reorder the section or cms order.\n     *\n     * @param {Element} container the HTML element to reorder.\n     * @param {Array} neworder an array with the ids order\n     * @param {string} selector the element selector\n     * @param {Object} dettachedelements a list of dettached elements\n     * @param {function} createMethod method to create missing elements\n     */\n    async _fixOrder(container, neworder, selector, dettachedelements, createMethod) {\n        if (container === undefined) {\n            return;\n        }\n\n        // Empty lists should not be visible.\n        if (!neworder.length) {\n            container.classList.add('hidden');\n            container.innerHTML = '';\n            return;\n        }\n\n        // Grant the list is visible (in case it was empty).\n        container.classList.remove('hidden');\n\n        // Move the elements in order at the beginning of the list.\n        neworder.forEach((itemid, index) => {\n            let item = this.getElement(selector, itemid) ?? dettachedelements[itemid] ?? createMethod(container, itemid);\n            if (item === undefined) {\n                // Missing elements cannot be sorted.\n                return;\n            }\n            // Get the current elemnt at that position.\n            const currentitem = container.children[index];\n            if (currentitem === undefined) {\n                container.append(item);\n                return;\n            }\n            if (currentitem !== item) {\n                container.insertBefore(item, currentitem);\n            }\n        });\n\n        // Dndupload add a fake element we need to keep.\n        let dndFakeActivity;\n\n        // Remove the remaining elements.\n        while (container.children.length > neworder.length) {\n            const lastchild = container.lastChild;\n            if (lastchild?.classList?.contains('dndupload-preview')) {\n                dndFakeActivity = lastchild;\n            } else {\n                dettachedelements[lastchild?.dataset?.id ?? 0] = lastchild;\n            }\n            container.removeChild(lastchild);\n        }\n        // Restore dndupload fake element.\n        if (dndFakeActivity) {\n            container.append(dndFakeActivity);\n        }\n    }\n}\n"],"names":["Component","BaseComponent","create","descriptor","name","selectors","SECTION","SECTION_ITEM","SECTION_CMLIST","COURSE_SECTIONLIST","CM","PAGE","TOGGLER","COLLAPSE","TOGGLEALL","ACTIVITYTAG","SECTIONTAG","classes","COLLAPSED","ACTIVITY","STATEDREADY","dettachedCms","dettachedSections","sections","cms","sectionReturn","debouncedReloads","Map","target","element","document","getElementById","reactive","stateReady","state","_indexContents","addEventListener","this","_sectionTogglers","toogleAll","getElement","collapseElementIds","getElements","map","id","setAttribute","join","_allSectionToggler","e","key","_refreshAllSectionsToggler","supportComponents","isEditing","DispatchActions","classList","add","CourseEvents","manualCompletionToggled","_completionHandler","querySelector","_scrollHandler","event","sectionlink","closest","closestCollapse","isChevron","section","toggler","isCollapsed","contains","sectionId","getAttribute","dispatch","preventDefault","isAllCollapsed","course","get","sectionlist","getWatchers","watch","handler","_reloadCm","_refreshSectionNumber","_refreshSectionCollapsed","_startProcessing","_refreshCourseSectionlist","_refreshSectionCmlist","Error","contentcollapsed","collapsibleId","dataset","replace","collapsible","collapse","allcollapsed","allexpanded","forEach","remove","detail","undefined","cmid","completed","pageOffset","scrollTop","items","getExporter","allItemsArray","pageItem","every","item","index","type","offsetTop","number","sectionid","inplace","inplaceeditable","getInplaceEditable","currentvalue","getValue","currentitemid","getItemId","rawtitle","setValue","cmlist","listparent","createCm","_createCmItem","bind","_fixOrder","createSection","_createSectionItem","_scanIndex","Section","CmItem","selector","creationhandler","_item$dataset","unregister","indexed","_getDebouncedReloadCm","debouncedReload","cmId","pendingKey","pendingReload","Pending","delete","cmitem","Fragment","loadFragment","Config","courseContextId","courseid","courseId","sr","then","html","js","replaceNode","resolve","catch","set","_reloadSection","sectionitem","container","newItem","createElement","for","append","neworder","dettachedelements","createMethod","length","innerHTML","dndFakeActivity","itemid","currentitem","children","insertBefore","lastchild","lastChild","_lastchild$classList","_lastchild$dataset","removeChild"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"content.min.js","sources":["../../src/local/content.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Course index main component.\n *\n * @module     core_courseformat/local/content\n * @class      core_courseformat/local/content\n * @copyright  2020 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {BaseComponent} from 'core/reactive';\nimport {debounce} from 'core/utils';\nimport {getCurrentCourseEditor} from 'core_courseformat/courseeditor';\nimport Config from 'core/config';\nimport inplaceeditable from 'core/inplace_editable';\nimport Section from 'core_courseformat/local/content/section';\nimport CmItem from 'core_courseformat/local/content/section/cmitem';\nimport Fragment from 'core/fragment';\nimport Templates from 'core/templates';\nimport DispatchActions from 'core_courseformat/local/content/actions';\nimport * as CourseEvents from 'core_course/events';\n// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.\nimport jQuery from 'jquery';\nimport Pending from 'core/pending';\n\nexport default class Component extends BaseComponent {\n\n    /**\n     * Constructor hook.\n     *\n     * @param {Object} descriptor the component descriptor\n     */\n    create(descriptor) {\n        // Optional component name for debugging.\n        this.name = 'course_format';\n        // Default query selectors.\n        this.selectors = {\n            SECTION: `[data-for='section']`,\n            SECTION_ITEM: `[data-for='section_title']`,\n            SECTION_CMLIST: `[data-for='cmlist']`,\n            COURSE_SECTIONLIST: `[data-for='course_sectionlist']`,\n            CM: `[data-for='cmitem']`,\n            TOGGLER: `[data-action=\"togglecoursecontentsection\"]`,\n            COLLAPSE: `[data-toggle=\"collapse\"]`,\n            TOGGLEALL: `[data-toggle=\"toggleall\"]`,\n            // Formats can override the activity tag but a default one is needed to create new elements.\n            ACTIVITYTAG: 'li',\n            SECTIONTAG: 'li',\n        };\n        // Default classes to toggle on refresh.\n        this.classes = {\n            COLLAPSED: `collapsed`,\n            // Course content classes.\n            ACTIVITY: `activity`,\n            STATEDREADY: `stateready`,\n            SECTION: `section`,\n        };\n        // Array to save dettached elements during element resorting.\n        this.dettachedCms = {};\n        this.dettachedSections = {};\n        // Index of sections and cms components.\n        this.sections = {};\n        this.cms = {};\n        // The page section return.\n        this.sectionReturn = descriptor.sectionReturn ?? 0;\n        this.debouncedReloads = new Map();\n    }\n\n    /**\n     * Static method to create a component instance form the mustahce template.\n     *\n     * @param {string} target the DOM main element or its ID\n     * @param {object} selectors optional css selector overrides\n     * @param {number} sectionReturn the content section return\n     * @return {Component}\n     */\n    static init(target, selectors, sectionReturn) {\n        return new Component({\n            element: document.getElementById(target),\n            reactive: getCurrentCourseEditor(),\n            selectors,\n            sectionReturn,\n        });\n    }\n\n    /**\n     * Initial state ready method.\n     *\n     * @param {Object} state the state data\n     */\n    stateReady(state) {\n        this._indexContents();\n        // Activate section togglers.\n        this.addEventListener(this.element, 'click', this._sectionTogglers);\n\n        // Collapse/Expand all sections button.\n        const toogleAll = this.getElement(this.selectors.TOGGLEALL);\n        if (toogleAll) {\n\n            // Ensure collapse menu button adds aria-controls attribute referring to each collapsible element.\n            const collapseElements = this.getElements(this.selectors.COLLAPSE);\n            const collapseElementIds = [...collapseElements].map(element => element.id);\n            toogleAll.setAttribute('aria-controls', collapseElementIds.join(' '));\n\n            this.addEventListener(toogleAll, 'click', this._allSectionToggler);\n            this.addEventListener(toogleAll, 'keydown', e => {\n                // Collapse/expand all sections when Space key is pressed on the toggle button.\n                if (e.key === ' ') {\n                    this._allSectionToggler(e);\n                }\n            });\n            this._refreshAllSectionsToggler(state);\n        }\n\n        if (this.reactive.supportComponents) {\n            // Actions are only available in edit mode.\n            if (this.reactive.isEditing) {\n                new DispatchActions(this);\n            }\n\n            // Mark content as state ready.\n            this.element.classList.add(this.classes.STATEDREADY);\n        }\n\n        // Capture completion events.\n        this.addEventListener(\n            this.element,\n            CourseEvents.manualCompletionToggled,\n            this._completionHandler\n        );\n\n        // Capture page scroll to update page item.\n        this.addEventListener(\n            document,\n            \"scroll\",\n            this._scrollHandler\n        );\n        setTimeout(() => {\n            this._scrollHandler();\n        }, 500);\n    }\n\n    /**\n     * Setup sections toggler.\n     *\n     * Toggler click is delegated to the main course content element because new sections can\n     * appear at any moment and this way we prevent accidental double bindings.\n     *\n     * @param {Event} event the triggered event\n     */\n    _sectionTogglers(event) {\n        const sectionlink = event.target.closest(this.selectors.TOGGLER);\n        const closestCollapse = event.target.closest(this.selectors.COLLAPSE);\n        // Assume that chevron is the only collapse toggler in a section heading;\n        // I think this is the most efficient way to verify at the moment.\n        const isChevron = closestCollapse?.closest(this.selectors.SECTION_ITEM);\n\n        if (sectionlink || isChevron) {\n\n            const section = event.target.closest(this.selectors.SECTION);\n            const toggler = section.querySelector(this.selectors.COLLAPSE);\n            const isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;\n\n            if (isChevron || isCollapsed) {\n                // Update the state.\n                const sectionId = section.getAttribute('data-id');\n                this.reactive.dispatch(\n                    'sectionContentCollapsed',\n                    [sectionId],\n                    !isCollapsed\n                );\n            }\n        }\n    }\n\n    /**\n     * Handle the collapse/expand all sections button.\n     *\n     * Toggler click is delegated to the main course content element because new sections can\n     * appear at any moment and this way we prevent accidental double bindings.\n     *\n     * @param {Event} event the triggered event\n     */\n    _allSectionToggler(event) {\n        event.preventDefault();\n\n        const target = event.target.closest(this.selectors.TOGGLEALL);\n        const isAllCollapsed = target.classList.contains(this.classes.COLLAPSED);\n\n        const course = this.reactive.get('course');\n        this.reactive.dispatch(\n            'sectionContentCollapsed',\n            course.sectionlist ?? [],\n            !isAllCollapsed\n        );\n    }\n\n    /**\n     * Return the component watchers.\n     *\n     * @returns {Array} of watchers\n     */\n    getWatchers() {\n        // Section return is a global page variable but most formats define it just before start printing\n        // the course content. This is the reason why we define this page setting here.\n        this.reactive.sectionReturn = this.sectionReturn;\n\n        // Check if the course format is compatible with reactive components.\n        if (!this.reactive.supportComponents) {\n            return [];\n        }\n        return [\n            // State changes that require to reload some course modules.\n            {watch: `cm.visible:updated`, handler: this._reloadCm},\n            {watch: `cm.stealth:updated`, handler: this._reloadCm},\n            {watch: `cm.sectionid:updated`, handler: this._reloadCm},\n            {watch: `cm.indent:updated`, handler: this._reloadCm},\n            {watch: `cm.groupmode:updated`, handler: this._reloadCm},\n            // Update section number and title.\n            {watch: `section.number:updated`, handler: this._refreshSectionNumber},\n            // Collapse and expand sections.\n            {watch: `section.contentcollapsed:updated`, handler: this._refreshSectionCollapsed},\n            // Sections and cm sorting.\n            {watch: `transaction:start`, handler: this._startProcessing},\n            {watch: `course.sectionlist:updated`, handler: this._refreshCourseSectionlist},\n            {watch: `section.cmlist:updated`, handler: this._refreshSectionCmlist},\n            // Reindex sections and cms.\n            {watch: `state:updated`, handler: this._indexContents},\n        ];\n    }\n\n    /**\n     * Update section collapsed state via bootstrap 4 if necessary.\n     *\n     * Formats that do not use bootstrap 4 must override this method in order to keep the section\n     * toggling working.\n     *\n     * @param {object} args\n     * @param {Object} args.state The state data\n     * @param {Object} args.element The element to update\n     */\n    _refreshSectionCollapsed({state, element}) {\n        const target = this.getElement(this.selectors.SECTION, element.id);\n        if (!target) {\n            throw new Error(`Unknown section with ID ${element.id}`);\n        }\n        // Check if it is already done.\n        const toggler = target.querySelector(this.selectors.COLLAPSE);\n        const isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;\n\n        if (element.contentcollapsed !== isCollapsed) {\n            let collapsibleId = toggler.dataset.target ?? toggler.getAttribute(\"href\");\n            if (!collapsibleId) {\n                return;\n            }\n            collapsibleId = collapsibleId.replace('#', '');\n            const collapsible = document.getElementById(collapsibleId);\n            if (!collapsible) {\n                return;\n            }\n\n            // Course index is based on Bootstrap 4 collapsibles. To collapse them we need jQuery to\n            // interact with collapsibles methods. Hopefully, this will change in Bootstrap 5 because\n            // it does not require jQuery anymore (when MDL-71979 is integrated).\n            jQuery(collapsible).collapse(element.contentcollapsed ? 'hide' : 'show');\n        }\n\n        this._refreshAllSectionsToggler(state);\n    }\n\n    /**\n     * Refresh the collapse/expand all sections element.\n     *\n     * @param {Object} state The state data\n     */\n    _refreshAllSectionsToggler(state) {\n        const target = this.getElement(this.selectors.TOGGLEALL);\n        if (!target) {\n            return;\n        }\n        // Check if we have all sections collapsed/expanded.\n        let allcollapsed = true;\n        let allexpanded = true;\n        state.section.forEach(\n            section => {\n                allcollapsed = allcollapsed && section.contentcollapsed;\n                allexpanded = allexpanded && !section.contentcollapsed;\n            }\n        );\n        if (allcollapsed) {\n            target.classList.add(this.classes.COLLAPSED);\n            target.setAttribute('aria-expanded', false);\n        }\n        if (allexpanded) {\n            target.classList.remove(this.classes.COLLAPSED);\n            target.setAttribute('aria-expanded', true);\n        }\n    }\n\n    /**\n     * Setup the component to start a transaction.\n     *\n     * Some of the course actions replaces the current DOM element with a new one before updating the\n     * course state. This means the component cannot preload any index properly until the transaction starts.\n     *\n     */\n    _startProcessing() {\n        // During a section or cm sorting, some elements could be dettached from the DOM and we\n        // need to store somewhare in case they are needed later.\n        this.dettachedCms = {};\n        this.dettachedSections = {};\n    }\n\n    /**\n     * Activity manual completion listener.\n     *\n     * @param {Event} event the custom ecent\n     */\n    _completionHandler({detail}) {\n        if (detail === undefined) {\n            return;\n        }\n        this.reactive.dispatch('cmCompletion', [detail.cmid], detail.completed);\n    }\n\n    /**\n     * Check the current page scroll and update the active element if necessary.\n     */\n    _scrollHandler() {\n        const pageOffset = window.scrollY;\n        const items = this.reactive.getExporter().allItemsArray(this.reactive.state);\n        // Check what is the active element now.\n        let pageItem = null;\n        items.every(item => {\n            const index = (item.type === 'section') ? this.sections : this.cms;\n            if (index[item.id] === undefined) {\n                return true;\n            }\n\n            const element = index[item.id].element;\n            pageItem = item;\n            return pageOffset >= element.offsetTop;\n        });\n        if (pageItem) {\n            this.reactive.dispatch('setPageItem', pageItem.type, pageItem.id);\n        }\n    }\n\n    /**\n     * Update a course section when the section number changes.\n     *\n     * The courseActions module used for most course section tools still depends on css classes and\n     * section numbers (not id). To prevent inconsistencies when a section is moved, we need to refresh\n     * the\n     *\n     * Course formats can override the section title rendering so the frontend depends heavily on backend\n     * rendering. Luckily in edit mode we can trigger a title update using the inplace_editable module.\n     *\n     * @param {Object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSectionNumber({element}) {\n        // Find the element.\n        const target = this.getElement(this.selectors.SECTION, element.id);\n        if (!target) {\n            // Job done. Nothing to refresh.\n            return;\n        }\n        // Update section numbers in all data, css and YUI attributes.\n        target.id = `section-${element.number}`;\n        // YUI uses section number as section id in data-sectionid, in principle if a format use components\n        // don't need this sectionid attribute anymore, but we keep the compatibility in case some plugin\n        // use it for legacy purposes.\n        target.dataset.sectionid = element.number;\n        // The data-number is the attribute used by components to store the section number.\n        target.dataset.number = element.number;\n\n        // Update title and title inplace editable, if any.\n        const inplace = inplaceeditable.getInplaceEditable(target.querySelector(this.selectors.SECTION_ITEM));\n        if (inplace) {\n            // The course content HTML can be modified at any moment, so the function need to do some checkings\n            // to make sure the inplace editable still represents the same itemid.\n            const currentvalue = inplace.getValue();\n            const currentitemid = inplace.getItemId();\n            // Unnamed sections must be recalculated.\n            if (inplace.getValue() === '') {\n                // The value to send can be an empty value if it is a default name.\n                if (currentitemid == element.id && (currentvalue != element.rawtitle || element.rawtitle == '')) {\n                    inplace.setValue(element.rawtitle);\n                }\n            }\n        }\n    }\n\n    /**\n     * Refresh a section cm list.\n     *\n     * @param {Object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSectionCmlist({element}) {\n        const cmlist = element.cmlist ?? [];\n        const section = this.getElement(this.selectors.SECTION, element.id);\n        const listparent = section?.querySelector(this.selectors.SECTION_CMLIST);\n        // A method to create a fake element to be replaced when the item is ready.\n        const createCm = this._createCmItem.bind(this);\n        if (listparent) {\n            this._fixOrder(listparent, cmlist, this.selectors.CM, this.dettachedCms, createCm);\n        }\n    }\n\n    /**\n     * Refresh the section list.\n     *\n     * @param {Object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshCourseSectionlist({element}) {\n        // If we have a section return means we only show a single section so no need to fix order.\n        if (this.reactive.sectionReturn != 0) {\n            return;\n        }\n        const sectionlist = element.sectionlist ?? [];\n        const listparent = this.getElement(this.selectors.COURSE_SECTIONLIST);\n        // For now section cannot be created at a frontend level.\n        const createSection = this._createSectionItem.bind(this);\n        if (listparent) {\n            this._fixOrder(listparent, sectionlist, this.selectors.SECTION, this.dettachedSections, createSection);\n        }\n    }\n\n    /**\n     * Regenerate content indexes.\n     *\n     * This method is used when a legacy action refresh some content element.\n     */\n    _indexContents() {\n        // Find unindexed sections.\n        this._scanIndex(\n            this.selectors.SECTION,\n            this.sections,\n            (item) => {\n                return new Section(item);\n            }\n        );\n\n        // Find unindexed cms.\n        this._scanIndex(\n            this.selectors.CM,\n            this.cms,\n            (item) => {\n                return new CmItem(item);\n            }\n        );\n    }\n\n    /**\n     * Reindex a content (section or cm) of the course content.\n     *\n     * This method is used internally by _indexContents.\n     *\n     * @param {string} selector the DOM selector to scan\n     * @param {*} index the index attribute to update\n     * @param {*} creationhandler method to create a new indexed element\n     */\n    _scanIndex(selector, index, creationhandler) {\n        const items = this.getElements(`${selector}:not([data-indexed])`);\n        items.forEach((item) => {\n            if (!item?.dataset?.id) {\n                return;\n            }\n            // Delete previous item component.\n            if (index[item.dataset.id] !== undefined) {\n                index[item.dataset.id].unregister();\n            }\n            // Create the new component.\n            index[item.dataset.id] = creationhandler({\n                ...this,\n                element: item,\n            });\n            // Mark as indexed.\n            item.dataset.indexed = true;\n        });\n    }\n\n    /**\n     * Reload a course module contents.\n     *\n     * Most course module HTML is still strongly backend dependant.\n     * Some changes require to get a new version of the module.\n     *\n     * @param {object} param0 the watcher details\n     * @param {object} param0.element the state object\n     */\n    _reloadCm({element}) {\n        if (!this.getElement(this.selectors.CM, element.id)) {\n            return;\n        }\n        const debouncedReload = this._getDebouncedReloadCm(element.id);\n        debouncedReload();\n    }\n\n    /**\n     * Generate or get a reload CM debounced function.\n     * @param {Number} cmId\n     * @returns {Function} the debounced reload function\n     */\n    _getDebouncedReloadCm(cmId) {\n        const pendingKey = `courseformat/content:reloadCm_${cmId}`;\n        let debouncedReload = this.debouncedReloads.get(pendingKey);\n        if (debouncedReload) {\n            return debouncedReload;\n        }\n        const pendingReload = new Pending(pendingKey);\n        const reload = () => {\n            this.debouncedReloads.delete(pendingKey);\n            const cmitem = this.getElement(this.selectors.CM, cmId);\n            if (!cmitem) {\n                return;\n            }\n            const promise = Fragment.loadFragment(\n                'core_courseformat',\n                'cmitem',\n                Config.courseContextId,\n                {\n                    id: cmId,\n                    courseid: Config.courseId,\n                    sr: this.reactive.sectionReturn ?? 0,\n                }\n            );\n            promise.then((html, js) => {\n                Templates.replaceNode(cmitem, html, js);\n                this._indexContents();\n                pendingReload.resolve();\n                return;\n            }).catch();\n        };\n        debouncedReload = debounce(reload, 200);\n        this.debouncedReloads.set(pendingKey, debouncedReload);\n        return debouncedReload;\n    }\n\n    /**\n     * Reload a course section contents.\n     *\n     * Section HTML is still strongly backend dependant.\n     * Some changes require to get a new version of the section.\n     *\n     * @param {details} param0 the watcher details\n     * @param {object} param0.element the state object\n     */\n    _reloadSection({element}) {\n        const pendingReload = new Pending(`courseformat/content:reloadSection_${element.id}`);\n        const sectionitem = this.getElement(this.selectors.SECTION, element.id);\n        if (sectionitem) {\n            const promise = Fragment.loadFragment(\n                'core_courseformat',\n                'section',\n                Config.courseContextId,\n                {\n                    id: element.id,\n                    courseid: Config.courseId,\n                    sr: this.reactive.sectionReturn ?? 0,\n                }\n            );\n            promise.then((html, js) => {\n                Templates.replaceNode(sectionitem, html, js);\n                this._indexContents();\n                pendingReload.resolve();\n                return;\n            }).catch();\n        }\n    }\n\n    /**\n     * Create a new course module item in a section.\n     *\n     * Thos method will append a fake item in the container and trigger an ajax request to\n     * replace the fake element by the real content.\n     *\n     * @param {Element} container the container element (section)\n     * @param {Number} cmid the course-module ID\n     * @returns {Element} the created element\n     */\n    _createCmItem(container, cmid) {\n        const newItem = document.createElement(this.selectors.ACTIVITYTAG);\n        newItem.dataset.for = 'cmitem';\n        newItem.dataset.id = cmid;\n        // The legacy actions.js requires a specific ID and class to refresh the CM.\n        newItem.id = `module-${cmid}`;\n        newItem.classList.add(this.classes.ACTIVITY);\n        container.append(newItem);\n        this._reloadCm({\n            element: this.reactive.get('cm', cmid),\n        });\n        return newItem;\n    }\n\n    /**\n     * Create a new section item.\n     *\n     * This method will append a fake item in the container and trigger an ajax request to\n     * replace the fake element by the real content.\n     *\n     * @param {Element} container the container element (section)\n     * @param {Number} sectionid the course-module ID\n     * @returns {Element} the created element\n     */\n    _createSectionItem(container, sectionid) {\n        const section = this.reactive.get('section', sectionid);\n        const newItem = document.createElement(this.selectors.SECTIONTAG);\n        newItem.dataset.for = 'section';\n        newItem.dataset.id = sectionid;\n        newItem.dataset.number = section.number;\n        // The legacy actions.js requires a specific ID and class to refresh the section.\n        newItem.id = `section-${sectionid}`;\n        newItem.classList.add(this.classes.SECTION);\n        container.append(newItem);\n        this._reloadSection({\n            element: section,\n        });\n        return newItem;\n    }\n\n    /**\n     * Fix/reorder the section or cms order.\n     *\n     * @param {Element} container the HTML element to reorder.\n     * @param {Array} neworder an array with the ids order\n     * @param {string} selector the element selector\n     * @param {Object} dettachedelements a list of dettached elements\n     * @param {function} createMethod method to create missing elements\n     */\n    async _fixOrder(container, neworder, selector, dettachedelements, createMethod) {\n        if (container === undefined) {\n            return;\n        }\n\n        // Empty lists should not be visible.\n        if (!neworder.length) {\n            container.classList.add('hidden');\n            container.innerHTML = '';\n            return;\n        }\n\n        // Grant the list is visible (in case it was empty).\n        container.classList.remove('hidden');\n\n        // Move the elements in order at the beginning of the list.\n        neworder.forEach((itemid, index) => {\n            let item = this.getElement(selector, itemid) ?? dettachedelements[itemid] ?? createMethod(container, itemid);\n            if (item === undefined) {\n                // Missing elements cannot be sorted.\n                return;\n            }\n            // Get the current elemnt at that position.\n            const currentitem = container.children[index];\n            if (currentitem === undefined) {\n                container.append(item);\n                return;\n            }\n            if (currentitem !== item) {\n                container.insertBefore(item, currentitem);\n            }\n        });\n\n        // Dndupload add a fake element we need to keep.\n        let dndFakeActivity;\n\n        // Remove the remaining elements.\n        while (container.children.length > neworder.length) {\n            const lastchild = container.lastChild;\n            if (lastchild?.classList?.contains('dndupload-preview')) {\n                dndFakeActivity = lastchild;\n            } else {\n                dettachedelements[lastchild?.dataset?.id ?? 0] = lastchild;\n            }\n            container.removeChild(lastchild);\n        }\n        // Restore dndupload fake element.\n        if (dndFakeActivity) {\n            container.append(dndFakeActivity);\n        }\n    }\n}\n"],"names":["Component","BaseComponent","create","descriptor","name","selectors","SECTION","SECTION_ITEM","SECTION_CMLIST","COURSE_SECTIONLIST","CM","TOGGLER","COLLAPSE","TOGGLEALL","ACTIVITYTAG","SECTIONTAG","classes","COLLAPSED","ACTIVITY","STATEDREADY","dettachedCms","dettachedSections","sections","cms","sectionReturn","debouncedReloads","Map","target","element","document","getElementById","reactive","stateReady","state","_indexContents","addEventListener","this","_sectionTogglers","toogleAll","getElement","collapseElementIds","getElements","map","id","setAttribute","join","_allSectionToggler","e","key","_refreshAllSectionsToggler","supportComponents","isEditing","DispatchActions","classList","add","CourseEvents","manualCompletionToggled","_completionHandler","_scrollHandler","setTimeout","event","sectionlink","closest","closestCollapse","isChevron","section","toggler","querySelector","isCollapsed","contains","sectionId","getAttribute","dispatch","preventDefault","isAllCollapsed","course","get","sectionlist","getWatchers","watch","handler","_reloadCm","_refreshSectionNumber","_refreshSectionCollapsed","_startProcessing","_refreshCourseSectionlist","_refreshSectionCmlist","Error","contentcollapsed","collapsibleId","dataset","replace","collapsible","collapse","allcollapsed","allexpanded","forEach","remove","detail","undefined","cmid","completed","pageOffset","window","scrollY","items","getExporter","allItemsArray","pageItem","every","item","index","type","offsetTop","number","sectionid","inplace","inplaceeditable","getInplaceEditable","currentvalue","getValue","currentitemid","getItemId","rawtitle","setValue","cmlist","listparent","createCm","_createCmItem","bind","_fixOrder","createSection","_createSectionItem","_scanIndex","Section","CmItem","selector","creationhandler","_item$dataset","unregister","indexed","_getDebouncedReloadCm","debouncedReload","cmId","pendingKey","pendingReload","Pending","delete","cmitem","Fragment","loadFragment","Config","courseContextId","courseid","courseId","sr","then","html","js","replaceNode","resolve","catch","set","_reloadSection","sectionitem","container","newItem","createElement","for","append","neworder","dettachedelements","createMethod","length","innerHTML","dndFakeActivity","itemid","currentitem","children","insertBefore","lastchild","lastChild","_lastchild$classList","_lastchild$dataset","removeChild"],"mappings":"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"}
\ No newline at end of file
diff --git a/course/format/amd/src/local/content.js b/course/format/amd/src/local/content.js
index 4e7d355f7f6..697931180ce 100644
--- a/course/format/amd/src/local/content.js
+++ b/course/format/amd/src/local/content.js
@@ -54,7 +54,6 @@ export default class Component extends BaseComponent {
             SECTION_CMLIST: `[data-for='cmlist']`,
             COURSE_SECTIONLIST: `[data-for='course_sectionlist']`,
             CM: `[data-for='cmitem']`,
-            PAGE: `#page`,
             TOGGLER: `[data-action="togglecoursecontentsection"]`,
             COLLAPSE: `[data-toggle="collapse"]`,
             TOGGLEALL: `[data-toggle="toggleall"]`,
@@ -146,10 +145,13 @@ export default class Component extends BaseComponent {
 
         // Capture page scroll to update page item.
         this.addEventListener(
-            document.querySelector(this.selectors.PAGE),
+            document,
             "scroll",
             this._scrollHandler
         );
+        setTimeout(() => {
+            this._scrollHandler();
+        }, 500);
     }
 
     /**
@@ -339,7 +341,7 @@ export default class Component extends BaseComponent {
      * Check the current page scroll and update the active element if necessary.
      */
     _scrollHandler() {
-        const pageOffset = document.querySelector(this.selectors.PAGE).scrollTop;
+        const pageOffset = window.scrollY;
         const items = this.reactive.getExporter().allItemsArray(this.reactive.state);
         // Check what is the active element now.
         let pageItem = null;
diff --git a/grade/tests/behat/behat_grade.php b/grade/tests/behat/behat_grade.php
index 72cc3e67743..42d3a0ae48d 100644
--- a/grade/tests/behat/behat_grade.php
+++ b/grade/tests/behat/behat_grade.php
@@ -40,6 +40,7 @@ class behat_grade extends behat_base {
      * @param string $itemname
      */
     public function i_give_the_grade($grade, $userfullname, $itemname) {
+        $this->execute('behat_navigation::i_close_block_drawer_if_open');
         $gradelabel = $userfullname . ' ' . $itemname;
         $fieldstr = get_string('useractivitygrade', 'gradereport_grader', $gradelabel);
 
@@ -58,6 +59,7 @@ class behat_grade extends behat_base {
      * @param TableNode $data
      */
     public function i_set_the_following_settings_for_grade_item(string $gradeitem, string $type, string $page, TableNode $data) {
+        $this->execute("behat_navigation::i_close_block_drawer_if_open");
 
         if ($this->running_javascript()) {
             $this->execute("behat_grades::i_click_on_grade_item_menu", [$gradeitem, $type, $page]);
diff --git a/grade/tests/behat/behat_grades.php b/grade/tests/behat/behat_grades.php
index 9df2e8a8961..5916462b307 100644
--- a/grade/tests/behat/behat_grades.php
+++ b/grade/tests/behat/behat_grades.php
@@ -237,7 +237,7 @@ class behat_grades extends behat_base {
      * @throws Exception
      */
     public function i_click_on_grade_item_menu(string $itemname, string $itemtype, string $page) {
-
+        $this->execute("behat_navigation::i_close_block_drawer_if_open");
         if ($itemtype == 'gradeitem') {
             $itemid = $this->get_grade_item_id($itemname);
         } else if ($itemtype == 'category') {
@@ -265,6 +265,8 @@ class behat_grades extends behat_base {
         } else {
             throw new Exception('Unknown page: ' . $page);
         }
+        $node = $this->get_selected_node("xpath_element", $this->escape($xpath));
+        $this->execute_js_on_node($node, '{{ELEMENT}}.scrollIntoView({ block: "center", inline: "center" })');
         $this->execute("behat_general::i_click_on", [$this->escape($xpath), "xpath_element"]);
     }
 }
diff --git a/lib/tests/behat/behat_navigation.php b/lib/tests/behat/behat_navigation.php
index f14bcbf4cd0..891c434c9a8 100644
--- a/lib/tests/behat/behat_navigation.php
+++ b/lib/tests/behat/behat_navigation.php
@@ -29,7 +29,6 @@ require_once(__DIR__ . '/../../behat/behat_base.php');
 
 use Behat\Mink\Element\NodeElement;
 use Behat\Mink\Exception\ExpectationException as ExpectationException;
-use Behat\Mink\Exception\DriverException as DriverException;
 use Behat\Mink\Exception\ElementNotFoundException as ElementNotFoundException;
 
 /**
@@ -1510,4 +1509,36 @@ class behat_navigation extends behat_base {
             );
         }
     }
+
+    /**
+     * Close the block drawer if it is open.
+     *
+     * This is necessary as in Behat the block drawer is open at each page load (disregarding user's settings)
+     * As the block drawer is positioned at the front of some contextual dialogs on the grade report for example.
+     * @Given I close block drawer if open
+     * @return void
+     */
+    public function i_close_block_drawer_if_open() {
+        if ($this->running_javascript()) {
+            $xpath = "//button[contains(@data-action,'closedrawer')][contains(@data-placement,'left')]";
+            $node = $this->getSession()->getPage()->find('xpath', $xpath);
+            if ($node && $node->isVisible()) {
+                $ishidden = $node->getAttribute('aria-hidden-tab-index');
+                if (!$ishidden) {
+                    $this->execute('behat_general::i_click_on', [$node, 'NodeElement']);
+                }
+            }
+        }
+    }
+
+    /**
+     * I close the block drawer and keep it closed.
+     *
+     * @Given I keep block drawer closed
+     * @return void
+     */
+    public function i_keep_block_drawer_closed() {
+        set_user_preference('behat_keep_drawer_closed', 1);
+        $this->i_close_block_drawer_if_open();
+    }
 }
diff --git a/lib/upgrade.txt b/lib/upgrade.txt
index 54e2529a57a..d99706fa030 100644
--- a/lib/upgrade.txt
+++ b/lib/upgrade.txt
@@ -83,6 +83,9 @@ information provided here is intended especially for developers.
 * help_icon constructor has a new optional $a parameter to allow variables with translation strings.
 * The random_bytes_emulate() function has been deprecated, because it's not required anymore. PHP native function random_bytes()
   should be used instead.
+* New behat behat_navigation::i_close_block_drawer_if_open() and behat_navigation::i_keep_block_drawer_closed()
+to ensure in some test that the block drawer is closed. This helps with random failures due to the block drawer
+being forced open in all behat tests.
 
 === 4.2 ===
 
diff --git a/theme/boost/amd/build/drawers.min.js b/theme/boost/amd/build/drawers.min.js
index c3c1ce20efa..2bdb9344b33 100644
--- a/theme/boost/amd/build/drawers.min.js
+++ b/theme/boost/amd/build/drawers.min.js
@@ -1,3 +1,3 @@
-define("theme_boost/drawers",["exports","core/modal_backdrop","core/templates","core/aria","core/event_dispatcher","core/utils","core/pagehelpers","core/pending","jquery"],(function(_exports,_modal_backdrop,_templates,Aria,_event_dispatcher,_utils,_pagehelpers,_pending,_jquery){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_modal_backdrop=_interopRequireDefault(_modal_backdrop),_templates=_interopRequireDefault(_templates),Aria=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(Aria),_pending=_interopRequireDefault(_pending),_jquery=_interopRequireDefault(_jquery);let backdropPromise=null;const drawerMap=new Map,SELECTORS_BUTTONS='[data-toggler="drawers"]',SELECTORS_CLOSEBTN='[data-toggler="drawers"][data-action="closedrawer"]',SELECTORS_OPENBTN='[data-toggler="drawers"][data-action="opendrawer"]',SELECTORS_TOGGLEBTN='[data-toggler="drawers"][data-action="toggle"]',SELECTORS_DRAWERS='[data-region="fixed-drawer"]',SELECTORS_CONTAINER="#page.drawers",SELECTORS_DRAWERCONTENT=".drawercontent",CLASSES_SCROLLED="scrolled",CLASSES_SHOW="show",CLASSES_NOTINITIALISED="not-initialized",CLASSES_TOGGLERIGHT=".drawer-right-toggle",getBackdrop=()=>(backdropPromise||(backdropPromise=_templates.default.render("core/modal_backdrop",{}).then((html=>new _modal_backdrop.default(html))).then((modalBackdrop=>(modalBackdrop.getAttachmentPoint().get(0).addEventListener("click",(e=>{e.preventDefault(),Drawers.closeAllDrawers()})),modalBackdrop))).catch()),backdropPromise),getDrawerOpenButton=drawerId=>{let openButton=document.querySelector("".concat(SELECTORS_OPENBTN,'[data-target="').concat(drawerId,'"]'));return openButton||(openButton=document.querySelector("".concat(SELECTORS_TOGGLEBTN,'[data-target="').concat(drawerId,'"]'))),openButton},disableDrawerTooltips=drawerNode=>{[drawerNode.querySelector(SELECTORS_CLOSEBTN),getDrawerOpenButton(drawerNode.id)].forEach((button=>{button&&disableButtonTooltip(button)}))},disableButtonTooltip=(button,enableOnBlur)=>{button.hasAttribute("data-original-title")?((0,_jquery.default)(button).tooltip("disable"),button.setAttribute("title",button.dataset.originalTitle)):(button.dataset.disabledToggle=button.dataset.toggle,button.removeAttribute("data-toggle")),enableOnBlur&&(button.dataset.restoreTooltipOnBlur=!0)},enableButtonTooltip=button=>{button.hasAttribute("data-original-title")?((0,_jquery.default)(button).tooltip("enable"),button.removeAttribute("title")):button.dataset.disabledToggle&&(button.dataset.toggle=button.dataset.disabledToggle,(0,_jquery.default)(button).tooltip()),delete button.dataset.restoreTooltipOnBlur};class Drawers{constructor(drawerNode){_defineProperty(this,"drawerNode",null),void 0===drawerNode.dataset.behatFakeDrawer&&(this.drawerNode=drawerNode,(0,_pagehelpers.isSmall)()&&this.closeDrawer({focusOnOpenButton:!1,updatePreferences:!1}),this.drawerNode.classList.contains(CLASSES_SHOW)?this.openDrawer({focusOnCloseButton:!1}):1==this.drawerNode.dataset.forceopen?(0,_pagehelpers.isSmall)()||this.openDrawer({focusOnCloseButton:!1}):Aria.hide(this.drawerNode),(0,_pagehelpers.isSmall)()&&disableDrawerTooltips(this.drawerNode),(drawerNode=>{const content=drawerNode.querySelector(SELECTORS_DRAWERCONTENT);content&&content.addEventListener("scroll",(()=>{drawerNode.classList.toggle(CLASSES_SCROLLED,0!=content.scrollTop)}))})(this.drawerNode),drawerMap.set(drawerNode,this),drawerNode.classList.remove(CLASSES_NOTINITIALISED))}get isOpen(){return this.drawerNode.classList.contains(CLASSES_SHOW)}get closeOnResize(){return!!parseInt(this.drawerNode.dataset.closeOnResize)}static getDrawerInstanceForNode(drawerNode){return drawerMap.has(drawerNode)||new Drawers(drawerNode),drawerMap.get(drawerNode)}dispatchEvent(eventname){let cancelable=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return(0,_event_dispatcher.dispatchEvent)(eventname,{drawerInstance:this},this.drawerNode,{cancelable:cancelable})}openDrawer(){var _this$drawerNode$quer;let{focusOnCloseButton:focusOnCloseButton=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const pendingPromise=new _pending.default("theme_boost/drawers:open");if(this.dispatchEvent(Drawers.eventTypes.drawerShow,!0).defaultPrevented)return;null===(_this$drawerNode$quer=this.drawerNode.querySelector(SELECTORS_CLOSEBTN))||void 0===_this$drawerNode$quer||_this$drawerNode$quer.classList.toggle("hidden",!0);let openButton=getDrawerOpenButton(this.drawerNode.id);var _jQuery;openButton&&openButton.hasAttribute("data-original-title")&&(null===(_jQuery=(0,_jquery.default)(openButton))||void 0===_jQuery||_jQuery.tooltip("hide"));Aria.unhide(this.drawerNode),this.drawerNode.classList.add(CLASSES_SHOW);const preference=this.drawerNode.dataset.preference;preference&&!(0,_pagehelpers.isSmall)()&&1!=this.drawerNode.dataset.forceopen&&M.util.set_user_preference(preference,!0);const state=this.drawerNode.dataset.state;if(state){document.getElementById("page").classList.add(state)}(0,_pagehelpers.isSmall)()&&getBackdrop().then((backdrop=>{backdrop.show();return document.getElementById("page").style.overflow="hidden",backdrop})).catch();const closeButton=this.drawerNode.querySelector(SELECTORS_CLOSEBTN);focusOnCloseButton&&closeButton&&disableButtonTooltip(closeButton,!0),setTimeout((()=>{closeButton.classList.toggle("hidden",!1),focusOnCloseButton&&closeButton.focus(),pendingPromise.resolve()}),300),this.dispatchEvent(Drawers.eventTypes.drawerShown)}closeDrawer(){let{focusOnOpenButton:focusOnOpenButton=!0,updatePreferences:updatePreferences=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const pendingPromise=new _pending.default("theme_boost/drawers:close");if(this.dispatchEvent(Drawers.eventTypes.drawerHide,!0).defaultPrevented)return;const closeButton=this.drawerNode.querySelector(SELECTORS_CLOSEBTN);var _jQuery2;(null==closeButton||closeButton.classList.toggle("hidden",!0),closeButton.hasAttribute("data-original-title"))&&(null===(_jQuery2=(0,_jquery.default)(closeButton))||void 0===_jQuery2||_jQuery2.tooltip("hide"));const preference=this.drawerNode.dataset.preference;preference&&updatePreferences&&!(0,_pagehelpers.isSmall)()&&M.util.set_user_preference(preference,!1);const state=this.drawerNode.dataset.state;if(state){document.getElementById("page").classList.remove(state)}Aria.hide(this.drawerNode),this.drawerNode.classList.remove(CLASSES_SHOW),getBackdrop().then((backdrop=>{if(backdrop.hide(),(0,_pagehelpers.isSmall)()){document.getElementById("page").style.overflow="auto"}return backdrop})).catch();let openButton=getDrawerOpenButton(this.drawerNode.id);openButton&&disableButtonTooltip(openButton,!0),setTimeout((()=>{openButton&&focusOnOpenButton&&openButton.focus(),pendingPromise.resolve()}),300),this.dispatchEvent(Drawers.eventTypes.drawerHidden)}toggleVisibility(){this.drawerNode.classList.contains(CLASSES_SHOW)?this.closeDrawer():this.openDrawer()}static closeAllDrawers(){drawerMap.forEach((drawerInstance=>{drawerInstance.closeDrawer()}))}static closeOtherDrawers(comparisonInstance){drawerMap.forEach((drawerInstance=>{drawerInstance!==comparisonInstance&&drawerInstance.closeDrawer()}))}}_exports.default=Drawers,_defineProperty(Drawers,"eventTypes",{drawerShow:"theme_boost/drawers:show",drawerShown:"theme_boost/drawers:shown",drawerHide:"theme_boost/drawers:hide",drawerHidden:"theme_boost/drawers:hidden"});const scrollbarVisible=htmlNode=>htmlNode.scrollHeight>htmlNode.clientHeight,setLastUsedToggle=toggleButton=>{toggleButton.dataset.target&&(document.querySelectorAll("".concat(SELECTORS_BUTTONS,'[data-target="').concat(toggleButton.dataset.target,'"]')).forEach((btn=>{btn.dataset.lastused=!1})),toggleButton.dataset.lastused=!0)};(()=>{const body=document.querySelector("body"),drawerLayout=document.querySelector(SELECTORS_CONTAINER);if(drawerLayout){const drawerRight=document.querySelector(SELECTORS_CONTAINER+" "+CLASSES_TOGGLERIGHT);!scrollbarVisible(drawerLayout)&&drawerRight&&(drawerRight.style.marginRight="0"),drawerLayout.addEventListener("scroll",(()=>{drawerLayout.scrollTop>=window.innerHeight?body.classList.add(CLASSES_SCROLLED):body.classList.remove(CLASSES_SCROLLED)}))}})(),(()=>{document.addEventListener("click",(e=>{const toggleButton=e.target.closest(SELECTORS_TOGGLEBTN);if(toggleButton&&toggleButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(toggleButton.dataset.target),drawerInstance=Drawers.getDrawerInstanceForNode(targetDrawer);setLastUsedToggle(toggleButton),drawerInstance.toggleVisibility()}const openDrawerButton=e.target.closest(SELECTORS_OPENBTN);if(openDrawerButton&&openDrawerButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(openDrawerButton.dataset.target),drawerInstance=Drawers.getDrawerInstanceForNode(targetDrawer);setLastUsedToggle(toggleButton),drawerInstance.openDrawer()}const closeDrawerButton=e.target.closest(SELECTORS_CLOSEBTN);if(closeDrawerButton&&closeDrawerButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(closeDrawerButton.dataset.target);Drawers.getDrawerInstanceForNode(targetDrawer).closeDrawer(),(target=>{const lastUsedButton=document.querySelector("".concat(SELECTORS_BUTTONS,'[data-target="').concat(target,'"][data-lastused="true"'));lastUsedButton&&lastUsedButton.focus()})(closeDrawerButton.dataset.target)}})),document.addEventListener(Drawers.eventTypes.drawerShow,(e=>{(0,_pagehelpers.isLarge)()||Drawers.closeOtherDrawers(e.detail.drawerInstance)}));const btnSelector="".concat(SELECTORS_TOGGLEBTN,", ").concat(SELECTORS_OPENBTN,", ").concat(SELECTORS_CLOSEBTN);document.addEventListener("focusout",(e=>{const button=e.target.closest(btnSelector);void 0!==(null==button?void 0:button.dataset.restoreTooltipOnBlur)&&enableButtonTooltip(button)}));window.addEventListener("resize",(0,_utils.debounce)((()=>{if((0,_pagehelpers.isSmall)()){let anyOpen=!1;drawerMap.forEach((drawerInstance=>{disableDrawerTooltips(drawerInstance.drawerNode),drawerInstance.isOpen&&(drawerInstance.closeOnResize?drawerInstance.closeDrawer():anyOpen=!0)})),anyOpen&&getBackdrop().then((backdrop=>backdrop.show())).catch()}else drawerMap.forEach((drawerInstance=>{var drawerNode;[(drawerNode=drawerInstance.drawerNode).querySelector(SELECTORS_CLOSEBTN),getDrawerOpenButton(drawerNode.id)].forEach((button=>{button&&enableButtonTooltip(button)}))})),getBackdrop().then((backdrop=>backdrop.hide())).catch()}),400))})();return document.querySelectorAll(SELECTORS_DRAWERS).forEach((drawerNode=>Drawers.getDrawerInstanceForNode(drawerNode))),_exports.default}));
+define("theme_boost/drawers",["exports","core/modal_backdrop","core/templates","core/aria","core/event_dispatcher","core/utils","core/pagehelpers","core/pending","jquery"],(function(_exports,_modal_backdrop,_templates,Aria,_event_dispatcher,_utils,_pagehelpers,_pending,_jquery){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_modal_backdrop=_interopRequireDefault(_modal_backdrop),_templates=_interopRequireDefault(_templates),Aria=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(Aria),_pending=_interopRequireDefault(_pending),_jquery=_interopRequireDefault(_jquery);let backdropPromise=null;const drawerMap=new Map,SELECTORS_BUTTONS='[data-toggler="drawers"]',SELECTORS_CLOSEBTN='[data-toggler="drawers"][data-action="closedrawer"]',SELECTORS_OPENBTN='[data-toggler="drawers"][data-action="opendrawer"]',SELECTORS_TOGGLEBTN='[data-toggler="drawers"][data-action="toggle"]',SELECTORS_DRAWERS='[data-region="fixed-drawer"]',SELECTORS_DRAWERCONTENT=".drawercontent",SELECTORS_PAGECONTENT="#page-content",CLASSES_SCROLLED="scrolled",CLASSES_SHOW="show",CLASSES_NOTINITIALISED="not-initialized",getDrawerZIndex=()=>{const drawer=document.querySelector(SELECTORS_DRAWERS);return drawer?parseInt(window.getComputedStyle(drawer).zIndex,10):null},getBackdrop=()=>(backdropPromise||(backdropPromise=_templates.default.render("core/modal_backdrop",{}).then((html=>new _modal_backdrop.default(html))).then((modalBackdrop=>(getDrawerZIndex()&&modalBackdrop.setZIndex(getDrawerZIndex()-1),modalBackdrop.getAttachmentPoint().get(0).addEventListener("click",(e=>{e.preventDefault(),Drawers.closeAllDrawers()})),modalBackdrop))).catch()),backdropPromise),getDrawerOpenButton=drawerId=>{let openButton=document.querySelector("".concat(SELECTORS_OPENBTN,'[data-target="').concat(drawerId,'"]'));return openButton||(openButton=document.querySelector("".concat(SELECTORS_TOGGLEBTN,'[data-target="').concat(drawerId,'"]'))),openButton},disableDrawerTooltips=drawerNode=>{[drawerNode.querySelector(SELECTORS_CLOSEBTN),getDrawerOpenButton(drawerNode.id)].forEach((button=>{button&&disableButtonTooltip(button)}))},disableButtonTooltip=(button,enableOnBlur)=>{button.hasAttribute("data-original-title")?((0,_jquery.default)(button).tooltip("disable"),button.setAttribute("title",button.dataset.originalTitle)):(button.dataset.disabledToggle=button.dataset.toggle,button.removeAttribute("data-toggle")),enableOnBlur&&(button.dataset.restoreTooltipOnBlur=!0)},enableButtonTooltip=button=>{button.hasAttribute("data-original-title")?((0,_jquery.default)(button).tooltip("enable"),button.removeAttribute("title")):button.dataset.disabledToggle&&(button.dataset.toggle=button.dataset.disabledToggle,(0,_jquery.default)(button).tooltip()),delete button.dataset.restoreTooltipOnBlur};class Drawers{constructor(drawerNode){_defineProperty(this,"drawerNode",null),_defineProperty(this,"boundingRect",null),void 0===drawerNode.dataset.behatFakeDrawer&&(this.drawerNode=drawerNode,(0,_pagehelpers.isSmall)()&&this.closeDrawer({focusOnOpenButton:!1,updatePreferences:!1}),this.drawerNode.classList.contains(CLASSES_SHOW)?this.openDrawer({focusOnCloseButton:!1}):1==this.drawerNode.dataset.forceopen?(0,_pagehelpers.isSmall)()||this.openDrawer({focusOnCloseButton:!1}):Aria.hide(this.drawerNode),(0,_pagehelpers.isSmall)()&&disableDrawerTooltips(this.drawerNode),(drawerNode=>{const content=drawerNode.querySelector(SELECTORS_DRAWERCONTENT);content&&content.addEventListener("scroll",(()=>{drawerNode.classList.toggle(CLASSES_SCROLLED,0!=content.scrollTop)}))})(this.drawerNode),drawerMap.set(drawerNode,this),drawerNode.classList.remove(CLASSES_NOTINITIALISED))}get isOpen(){return this.drawerNode.classList.contains(CLASSES_SHOW)}get closeOnResize(){return!!parseInt(this.drawerNode.dataset.closeOnResize)}static getDrawerInstanceForNode(drawerNode){return drawerMap.has(drawerNode)||new Drawers(drawerNode),drawerMap.get(drawerNode)}dispatchEvent(eventname){let cancelable=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return(0,_event_dispatcher.dispatchEvent)(eventname,{drawerInstance:this},this.drawerNode,{cancelable:cancelable})}openDrawer(){var _this$drawerNode$quer;let{focusOnCloseButton:focusOnCloseButton=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const pendingPromise=new _pending.default("theme_boost/drawers:open");if(this.dispatchEvent(Drawers.eventTypes.drawerShow,!0).defaultPrevented)return;null===(_this$drawerNode$quer=this.drawerNode.querySelector(SELECTORS_CLOSEBTN))||void 0===_this$drawerNode$quer||_this$drawerNode$quer.classList.toggle("hidden",!0);let openButton=getDrawerOpenButton(this.drawerNode.id);var _jQuery;openButton&&openButton.hasAttribute("data-original-title")&&(null===(_jQuery=(0,_jquery.default)(openButton))||void 0===_jQuery||_jQuery.tooltip("hide"));Aria.unhide(this.drawerNode),this.drawerNode.classList.add(CLASSES_SHOW);const preference=this.drawerNode.dataset.preference;preference&&!(0,_pagehelpers.isSmall)()&&1!=this.drawerNode.dataset.forceopen&&M.util.set_user_preference(preference,!0);const state=this.drawerNode.dataset.state;if(state){document.getElementById("page").classList.add(state)}this.boundingRect=this.drawerNode.getBoundingClientRect(),(0,_pagehelpers.isSmall)()&&getBackdrop().then((backdrop=>{backdrop.show();return document.getElementById("page").style.overflow="hidden",backdrop})).catch();const closeButton=this.drawerNode.querySelector(SELECTORS_CLOSEBTN);focusOnCloseButton&&closeButton&&disableButtonTooltip(closeButton,!0),setTimeout((()=>{closeButton.classList.toggle("hidden",!1),focusOnCloseButton&&closeButton.focus(),pendingPromise.resolve()}),300),this.dispatchEvent(Drawers.eventTypes.drawerShown)}closeDrawer(){let{focusOnOpenButton:focusOnOpenButton=!0,updatePreferences:updatePreferences=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const pendingPromise=new _pending.default("theme_boost/drawers:close");if(this.dispatchEvent(Drawers.eventTypes.drawerHide,!0).defaultPrevented)return;const closeButton=this.drawerNode.querySelector(SELECTORS_CLOSEBTN);var _jQuery2;(null==closeButton||closeButton.classList.toggle("hidden",!0),closeButton.hasAttribute("data-original-title"))&&(null===(_jQuery2=(0,_jquery.default)(closeButton))||void 0===_jQuery2||_jQuery2.tooltip("hide"));const preference=this.drawerNode.dataset.preference;preference&&updatePreferences&&!(0,_pagehelpers.isSmall)()&&M.util.set_user_preference(preference,!1);const state=this.drawerNode.dataset.state;if(state){document.getElementById("page").classList.remove(state)}Aria.hide(this.drawerNode),this.drawerNode.classList.remove(CLASSES_SHOW),getBackdrop().then((backdrop=>{if(backdrop.hide(),(0,_pagehelpers.isSmall)()){document.getElementById("page").style.overflow="visible"}return backdrop})).catch();let openButton=getDrawerOpenButton(this.drawerNode.id);openButton&&disableButtonTooltip(openButton,!0),setTimeout((()=>{openButton&&focusOnOpenButton&&openButton.focus(),pendingPromise.resolve()}),300),this.dispatchEvent(Drawers.eventTypes.drawerHidden)}toggleVisibility(){this.drawerNode.classList.contains(CLASSES_SHOW)?this.closeDrawer():this.openDrawer()}displace(scrollPosition){var _this$drawerNode$data;let displace=scrollPosition,openButton=getDrawerOpenButton(this.drawerNode.id);if(0===scrollPosition)return this.drawerNode.style.transform="",void(openButton&&(openButton.style.transform=""));const state=null===(_this$drawerNode$data=this.drawerNode.dataset)||void 0===_this$drawerNode$data?void 0:_this$drawerNode$data.state,drawrWidth=this.drawerNode.offsetWidth;let scrollThreshold=drawrWidth,direction=-1;"show-drawer-right"===state&&(direction=1,scrollThreshold=20),scrollPosition>scrollThreshold&&(displace=drawrWidth+20),displace*=direction;const transform="translateX(".concat(displace,"px)");openButton&&(openButton.style.transform=transform),this.drawerNode.style.transform=transform}preventOverlap(currentFocus){if(!this.isOpen)return;const drawrWidth=this.drawerNode.offsetWidth,element=currentFocus.getBoundingClientRect(),drawer=this.boundingRect;element.right+20>drawer.left&&element.left-20<drawer.right?this.displace(drawrWidth+1):this.displace(window.scrollX)}static closeAllDrawers(){drawerMap.forEach((drawerInstance=>{drawerInstance.closeDrawer()}))}static closeOtherDrawers(comparisonInstance){drawerMap.forEach((drawerInstance=>{drawerInstance!==comparisonInstance&&drawerInstance.closeDrawer()}))}static preventCoveringFocusedElement(){const currentFocus=document.activeElement,pagecontent=document.querySelector(SELECTORS_PAGECONTENT);currentFocus&&null!=pagecontent&&pagecontent.contains(currentFocus)?drawerMap.forEach((drawerInstance=>{drawerInstance.preventOverlap(currentFocus)})):Drawers.displaceDrawers(window.scrollX)}static displaceDrawers(displace){drawerMap.forEach((drawerInstance=>{drawerInstance.displace(displace)}))}}_exports.default=Drawers,_defineProperty(Drawers,"eventTypes",{drawerShow:"theme_boost/drawers:show",drawerShown:"theme_boost/drawers:shown",drawerHide:"theme_boost/drawers:hide",drawerHidden:"theme_boost/drawers:hidden"});const setLastUsedToggle=toggleButton=>{toggleButton.dataset.target&&(document.querySelectorAll("".concat(SELECTORS_BUTTONS,'[data-target="').concat(toggleButton.dataset.target,'"]')).forEach((btn=>{btn.dataset.lastused=!1})),toggleButton.dataset.lastused=!0)};(()=>{document.addEventListener("click",(e=>{const toggleButton=e.target.closest(SELECTORS_TOGGLEBTN);if(toggleButton&&toggleButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(toggleButton.dataset.target),drawerInstance=Drawers.getDrawerInstanceForNode(targetDrawer);setLastUsedToggle(toggleButton),drawerInstance.toggleVisibility()}const openDrawerButton=e.target.closest(SELECTORS_OPENBTN);if(openDrawerButton&&openDrawerButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(openDrawerButton.dataset.target),drawerInstance=Drawers.getDrawerInstanceForNode(targetDrawer);setLastUsedToggle(toggleButton),drawerInstance.openDrawer()}const closeDrawerButton=e.target.closest(SELECTORS_CLOSEBTN);if(closeDrawerButton&&closeDrawerButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(closeDrawerButton.dataset.target);Drawers.getDrawerInstanceForNode(targetDrawer).closeDrawer(),(target=>{const lastUsedButton=document.querySelector("".concat(SELECTORS_BUTTONS,'[data-target="').concat(target,'"][data-lastused="true"'));lastUsedButton&&lastUsedButton.focus()})(closeDrawerButton.dataset.target)}})),document.addEventListener(Drawers.eventTypes.drawerShow,(e=>{(0,_pagehelpers.isLarge)()||Drawers.closeOtherDrawers(e.detail.drawerInstance)}));const btnSelector="".concat(SELECTORS_TOGGLEBTN,", ").concat(SELECTORS_OPENBTN,", ").concat(SELECTORS_CLOSEBTN);document.addEventListener("focusout",(e=>{const button=e.target.closest(btnSelector);void 0!==(null==button?void 0:button.dataset.restoreTooltipOnBlur)&&enableButtonTooltip(button)}));document.addEventListener("scroll",(()=>{const body=document.querySelector("body");window.scrollY>=window.innerHeight?body.classList.add(CLASSES_SCROLLED):body.classList.remove(CLASSES_SCROLLED),Drawers.displaceDrawers(window.scrollX)}));const preventOverlap=(0,_utils.debounce)(Drawers.preventCoveringFocusedElement,100);document.addEventListener("focusin",preventOverlap),document.addEventListener("focusout",preventOverlap),window.addEventListener("resize",(0,_utils.debounce)((()=>{if((0,_pagehelpers.isSmall)()){let anyOpen=!1;drawerMap.forEach((drawerInstance=>{disableDrawerTooltips(drawerInstance.drawerNode),drawerInstance.isOpen&&(drawerInstance.closeOnResize?drawerInstance.closeDrawer():anyOpen=!0)})),anyOpen&&getBackdrop().then((backdrop=>backdrop.show())).catch()}else drawerMap.forEach((drawerInstance=>{var drawerNode;[(drawerNode=drawerInstance.drawerNode).querySelector(SELECTORS_CLOSEBTN),getDrawerOpenButton(drawerNode.id)].forEach((button=>{button&&enableButtonTooltip(button)}))})),getBackdrop().then((backdrop=>backdrop.hide())).catch()}),400))})();return document.querySelectorAll(SELECTORS_DRAWERS).forEach((drawerNode=>Drawers.getDrawerInstanceForNode(drawerNode))),_exports.default}));
 
 //# sourceMappingURL=drawers.min.js.map
\ No newline at end of file
diff --git a/theme/boost/amd/build/drawers.min.js.map b/theme/boost/amd/build/drawers.min.js.map
index df9e25d62b8..c46be7fe01c 100644
--- a/theme/boost/amd/build/drawers.min.js.map
+++ b/theme/boost/amd/build/drawers.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"drawers.min.js","sources":["../src/drawers.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Toggling the visibility of the secondary navigation on mobile.\n *\n * @module     theme_boost/drawers\n * @copyright  2021 Bas Brands\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport ModalBackdrop from 'core/modal_backdrop';\nimport Templates from 'core/templates';\nimport * as Aria from 'core/aria';\nimport {dispatchEvent} from 'core/event_dispatcher';\nimport {debounce} from 'core/utils';\nimport {isSmall, isLarge} from 'core/pagehelpers';\nimport Pending from 'core/pending';\n// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.\nimport jQuery from 'jquery';\n\nlet backdropPromise = null;\n\nconst drawerMap = new Map();\n\nconst SELECTORS = {\n    BUTTONS: '[data-toggler=\"drawers\"]',\n    CLOSEBTN: '[data-toggler=\"drawers\"][data-action=\"closedrawer\"]',\n    OPENBTN: '[data-toggler=\"drawers\"][data-action=\"opendrawer\"]',\n    TOGGLEBTN: '[data-toggler=\"drawers\"][data-action=\"toggle\"]',\n    DRAWERS: '[data-region=\"fixed-drawer\"]',\n    CONTAINER: '#page.drawers',\n    DRAWERCONTENT: '.drawercontent',\n};\n\nconst CLASSES = {\n    SCROLLED: 'scrolled',\n    SHOW: 'show',\n    NOTINITIALISED: 'not-initialized',\n    TOGGLERIGHT: '.drawer-right-toggle',\n};\n\n/**\n * Add a backdrop to the page.\n *\n * @returns {Promise} rendering of modal backdrop.\n * @private\n */\nconst getBackdrop = () => {\n    if (!backdropPromise) {\n        backdropPromise = Templates.render('core/modal_backdrop', {})\n        .then(html => new ModalBackdrop(html))\n        .then(modalBackdrop => {\n            modalBackdrop.getAttachmentPoint().get(0).addEventListener('click', e => {\n                e.preventDefault();\n                Drawers.closeAllDrawers();\n            });\n            return modalBackdrop;\n        })\n        .catch();\n    }\n    return backdropPromise;\n};\n\n/**\n * Get the button element to open a specific drawer.\n *\n * @param {String} drawerId the drawer element Id\n * @return {HTMLElement|undefined} the open button element\n * @private\n */\nconst getDrawerOpenButton = (drawerId) => {\n    let openButton = document.querySelector(`${SELECTORS.OPENBTN}[data-target=\"${drawerId}\"]`);\n    if (!openButton) {\n        openButton = document.querySelector(`${SELECTORS.TOGGLEBTN}[data-target=\"${drawerId}\"]`);\n    }\n    return openButton;\n};\n\n/**\n * Disable drawer tooltips.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst disableDrawerTooltips = (drawerNode) => {\n    const buttons = [\n        drawerNode.querySelector(SELECTORS.CLOSEBTN),\n        getDrawerOpenButton(drawerNode.id),\n    ];\n    buttons.forEach(button => {\n        if (!button) {\n            return;\n        }\n        disableButtonTooltip(button);\n    });\n};\n\n/**\n * Disable the button tooltips.\n *\n * @param {HTMLElement} button the button element\n * @param {boolean} enableOnBlur if the tooltip must be re-enabled on blur.\n * @private\n */\nconst disableButtonTooltip = (button, enableOnBlur) => {\n    if (button.hasAttribute('data-original-title')) {\n        // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n        jQuery(button).tooltip('disable');\n        button.setAttribute('title', button.dataset.originalTitle);\n    } else {\n        button.dataset.disabledToggle = button.dataset.toggle;\n        button.removeAttribute('data-toggle');\n    }\n    if (enableOnBlur) {\n        button.dataset.restoreTooltipOnBlur = true;\n    }\n};\n\n/**\n * Enable drawer tooltips.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst enableDrawerTooltips = (drawerNode) => {\n    const buttons = [\n        drawerNode.querySelector(SELECTORS.CLOSEBTN),\n        getDrawerOpenButton(drawerNode.id),\n    ];\n    buttons.forEach(button => {\n        if (!button) {\n            return;\n        }\n        enableButtonTooltip(button);\n    });\n};\n\n/**\n * Enable the button tooltips.\n *\n * @param {HTMLElement} button the button element\n * @private\n */\nconst enableButtonTooltip = (button) => {\n    // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n    if (button.hasAttribute('data-original-title')) {\n        jQuery(button).tooltip('enable');\n        button.removeAttribute('title');\n    } else if (button.dataset.disabledToggle) {\n        button.dataset.toggle = button.dataset.disabledToggle;\n        jQuery(button).tooltip();\n    }\n    delete button.dataset.restoreTooltipOnBlur;\n};\n\n/**\n * Add scroll listeners to a drawer element.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst addInnerScrollListener = (drawerNode) => {\n    const content = drawerNode.querySelector(SELECTORS.DRAWERCONTENT);\n    if (!content) {\n        return;\n    }\n    content.addEventListener(\"scroll\", () => {\n        drawerNode.classList.toggle(\n            CLASSES.SCROLLED,\n            content.scrollTop != 0\n        );\n    });\n};\n\n/**\n * The Drawers class is used to control on-screen drawer elements.\n *\n * It handles opening, and closing of drawer elements, as well as more detailed behaviours such as closing a drawer when\n * another drawer is opened, and supports closing a drawer when the screen is resized.\n *\n * Drawers are instantiated on page load, and can also be toggled lazily when toggling any drawer toggle, open button,\n * or close button.\n *\n * A range of show and hide events are also dispatched as detailed in the class\n * {@link module:theme_boost/drawers#eventTypes eventTypes} object.\n *\n * @example <caption>Standard usage</caption>\n *\n * // The module just needs to be included to add drawer support.\n * import 'theme_boost/drawers';\n *\n * @example <caption>Manually open or close any drawer</caption>\n *\n * import Drawers from 'theme_boost/drawers';\n *\n * const myDrawer = Drawers.getDrawerInstanceForNode(document.querySelector('.myDrawerNode');\n * myDrawer.closeDrawer();\n *\n * @example <caption>Listen to the before show event and cancel it</caption>\n *\n * import Drawers from 'theme_boost/drawers';\n *\n * document.addEventListener(Drawers.eventTypes.drawerShow, e => {\n *     // The drawer which will be shown.\n *     window.console.log(e.target);\n *\n *     // The instance of the Drawers class for this drawer.\n *     window.console.log(e.detail.drawerInstance);\n *\n *     // Prevent this drawer from being shown.\n *     e.preventDefault();\n * });\n *\n * @example <caption>Listen to the shown event</caption>\n *\n * document.addEventListener(Drawers.eventTypes.drawerShown, e => {\n *     // The drawer which was shown.\n *     window.console.log(e.target);\n *\n *     // The instance of the Drawers class for this drawer.\n *     window.console.log(e.detail.drawerInstance);\n * });\n */\nexport default class Drawers {\n    /**\n     * The underlying HTMLElement which is controlled.\n     */\n    drawerNode = null;\n\n    constructor(drawerNode) {\n        // Some behat tests may use fake drawer divs to test components in drawers.\n        if (drawerNode.dataset.behatFakeDrawer !== undefined) {\n            return;\n        }\n\n        this.drawerNode = drawerNode;\n\n        if (isSmall()) {\n            this.closeDrawer({focusOnOpenButton: false, updatePreferences: false});\n        }\n\n        if (this.drawerNode.classList.contains(CLASSES.SHOW)) {\n            this.openDrawer({focusOnCloseButton: false});\n        } else if (this.drawerNode.dataset.forceopen == 1) {\n            if (!isSmall()) {\n                this.openDrawer({focusOnCloseButton: false});\n            }\n        } else {\n            Aria.hide(this.drawerNode);\n        }\n\n        // Disable tooltips in small screens.\n        if (isSmall()) {\n            disableDrawerTooltips(this.drawerNode);\n        }\n\n        addInnerScrollListener(this.drawerNode);\n\n        drawerMap.set(drawerNode, this);\n\n        drawerNode.classList.remove(CLASSES.NOTINITIALISED);\n    }\n\n    /**\n     * Whether the drawer is open.\n     *\n     * @returns {boolean}\n     */\n    get isOpen() {\n        return this.drawerNode.classList.contains(CLASSES.SHOW);\n    }\n\n    /**\n     * Whether the drawer should close when the window is resized\n     *\n     * @returns {boolean}\n     */\n    get closeOnResize() {\n        return !!parseInt(this.drawerNode.dataset.closeOnResize);\n    }\n\n    /**\n     * The list of event types.\n     *\n     * @static\n     * @property {String} drawerShow See {@link event:theme_boost/drawers:show}\n     * @property {String} drawerShown See {@link event:theme_boost/drawers:shown}\n     * @property {String} drawerHide See {@link event:theme_boost/drawers:hide}\n     * @property {String} drawerHidden See {@link event:theme_boost/drawers:hidden}\n     */\n    static eventTypes = {\n        /**\n         * An event triggered before a drawer is shown.\n         *\n         * @event theme_boost/drawers:show\n         * @type {CustomEvent}\n         * @property {HTMLElement} target The drawer that will be opened.\n         */\n        drawerShow: 'theme_boost/drawers:show',\n\n        /**\n         * An event triggered after a drawer is shown.\n         *\n         * @event theme_boost/drawers:shown\n         * @type {CustomEvent}\n         * @property {HTMLElement} target The drawer that was be opened.\n         */\n        drawerShown: 'theme_boost/drawers:shown',\n\n        /**\n         * An event triggered before a drawer is hidden.\n         *\n         * @event theme_boost/drawers:hide\n         * @type {CustomEvent}\n         * @property {HTMLElement} target The drawer that will be hidden.\n         */\n        drawerHide: 'theme_boost/drawers:hide',\n\n        /**\n         * An event triggered after a drawer is hidden.\n         *\n         * @event theme_boost/drawers:hidden\n         * @type {CustomEvent}\n         * @property {HTMLElement} target The drawer that was be hidden.\n         */\n        drawerHidden: 'theme_boost/drawers:hidden',\n    };\n\n\n    /**\n     * Get the drawer instance for the specified node\n     *\n     * @param {HTMLElement} drawerNode\n     * @returns {module:theme_boost/drawers}\n     */\n    static getDrawerInstanceForNode(drawerNode) {\n        if (!drawerMap.has(drawerNode)) {\n            new Drawers(drawerNode);\n        }\n\n        return drawerMap.get(drawerNode);\n    }\n\n    /**\n     * Dispatch a drawer event.\n     *\n     * @param {string} eventname the event name\n     * @param {boolean} cancelable if the event is cancelable\n     * @returns {CustomEvent} the resulting custom event\n     */\n    dispatchEvent(eventname, cancelable = false) {\n        return dispatchEvent(\n            eventname,\n            {\n                drawerInstance: this,\n            },\n            this.drawerNode,\n            {\n                cancelable,\n            }\n        );\n    }\n\n    /**\n     * Open the drawer.\n     *\n     * By default, openDrawer sets the page focus to the close drawer button. However, when a drawer is open at page\n     * load, this represents an accessibility problem as the initial focus changes without any user interaction. The\n     * focusOnCloseButton parameter can be set to false to prevent this behaviour.\n     *\n     * @param {object} args\n     * @param {boolean} [args.focusOnCloseButton=true] Whether to alter page focus when opening the drawer\n     */\n    openDrawer({focusOnCloseButton = true} = {}) {\n\n        const pendingPromise = new Pending('theme_boost/drawers:open');\n        const showEvent = this.dispatchEvent(Drawers.eventTypes.drawerShow, true);\n        if (showEvent.defaultPrevented) {\n            return;\n        }\n\n        // Hide close button while the drawer is showing to prevent glitchy effects.\n        this.drawerNode.querySelector(SELECTORS.CLOSEBTN)?.classList.toggle('hidden', true);\n\n        // Remove open tooltip if still visible.\n        let openButton = getDrawerOpenButton(this.drawerNode.id);\n        if (openButton && openButton.hasAttribute('data-original-title')) {\n            // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n            jQuery(openButton)?.tooltip('hide');\n        }\n\n        Aria.unhide(this.drawerNode);\n        this.drawerNode.classList.add(CLASSES.SHOW);\n\n        const preference = this.drawerNode.dataset.preference;\n        if (preference && !isSmall() && (this.drawerNode.dataset.forceopen != 1)) {\n            M.util.set_user_preference(preference, true);\n        }\n\n        const state = this.drawerNode.dataset.state;\n        if (state) {\n            const page = document.getElementById('page');\n            page.classList.add(state);\n        }\n\n        if (isSmall()) {\n            getBackdrop().then(backdrop => {\n                backdrop.show();\n\n                const pageWrapper = document.getElementById('page');\n                pageWrapper.style.overflow = 'hidden';\n                return backdrop;\n            })\n            .catch();\n        }\n\n        // Show close button once the drawer is fully opened.\n        const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);\n        if (focusOnCloseButton && closeButton) {\n            disableButtonTooltip(closeButton, true);\n        }\n        setTimeout(() => {\n            closeButton.classList.toggle('hidden', false);\n            if (focusOnCloseButton) {\n                closeButton.focus();\n            }\n            pendingPromise.resolve();\n        }, 300);\n\n        this.dispatchEvent(Drawers.eventTypes.drawerShown);\n    }\n\n    /**\n     * Close the drawer.\n     *\n     * @param {object} args\n     * @param {boolean} [args.focusOnOpenButton=true] Whether to alter page focus when opening the drawer\n     * @param {boolean} [args.updatePreferences=true] Whether to update the user prewference\n     */\n    closeDrawer({focusOnOpenButton = true, updatePreferences = true} = {}) {\n\n        const pendingPromise = new Pending('theme_boost/drawers:close');\n\n        const hideEvent = this.dispatchEvent(Drawers.eventTypes.drawerHide, true);\n        if (hideEvent.defaultPrevented) {\n            return;\n        }\n\n        // Hide close button while the drawer is hiding to prevent glitchy effects.\n        const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);\n        closeButton?.classList.toggle('hidden', true);\n        // Remove the close button tooltip if visible.\n        if (closeButton.hasAttribute('data-original-title')) {\n            // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n            jQuery(closeButton)?.tooltip('hide');\n        }\n\n        const preference = this.drawerNode.dataset.preference;\n        if (preference && updatePreferences && !isSmall()) {\n            M.util.set_user_preference(preference, false);\n        }\n\n        const state = this.drawerNode.dataset.state;\n        if (state) {\n            const page = document.getElementById('page');\n            page.classList.remove(state);\n        }\n\n        Aria.hide(this.drawerNode);\n        this.drawerNode.classList.remove(CLASSES.SHOW);\n\n        getBackdrop().then(backdrop => {\n            backdrop.hide();\n\n            if (isSmall()) {\n                const pageWrapper = document.getElementById('page');\n                pageWrapper.style.overflow = 'auto';\n            }\n            return backdrop;\n        })\n        .catch();\n\n        // Move focus to the open drawer (or toggler) button once the drawer is hidden.\n        let openButton = getDrawerOpenButton(this.drawerNode.id);\n        if (openButton) {\n            disableButtonTooltip(openButton, true);\n        }\n        setTimeout(() => {\n            if (openButton && focusOnOpenButton) {\n                openButton.focus();\n            }\n            pendingPromise.resolve();\n        }, 300);\n\n        this.dispatchEvent(Drawers.eventTypes.drawerHidden);\n    }\n\n    /**\n     * Toggle visibility of the drawer.\n     */\n    toggleVisibility() {\n        if (this.drawerNode.classList.contains(CLASSES.SHOW)) {\n            this.closeDrawer();\n        } else {\n            this.openDrawer();\n        }\n    }\n\n    /**\n     * Close all drawers.\n     */\n    static closeAllDrawers() {\n        drawerMap.forEach(drawerInstance => {\n            drawerInstance.closeDrawer();\n        });\n    }\n\n    /**\n     * Close all drawers except for the specified drawer.\n     *\n     * @param {module:theme_boost/drawers} comparisonInstance\n     */\n    static closeOtherDrawers(comparisonInstance) {\n        drawerMap.forEach(drawerInstance => {\n            if (drawerInstance === comparisonInstance) {\n                return;\n            }\n\n            drawerInstance.closeDrawer();\n        });\n    }\n}\n\n/**\n * Activate the scroller helper for the drawer layout.\n *\n * @private\n */\nconst scroller = () => {\n    const body = document.querySelector('body');\n    const drawerLayout = document.querySelector(SELECTORS.CONTAINER);\n    if (drawerLayout) {\n        // If there is not visible scrollbar then remove extra margin from right drawer.\n        const drawerRight = document.querySelector(SELECTORS.CONTAINER + ' ' + CLASSES.TOGGLERIGHT);\n        if (!scrollbarVisible(drawerLayout) && drawerRight) {\n            drawerRight.style.marginRight = '0';\n        }\n        drawerLayout.addEventListener(\"scroll\", () => {\n            if (drawerLayout.scrollTop >= window.innerHeight) {\n                body.classList.add(CLASSES.SCROLLED);\n            } else {\n                body.classList.remove(CLASSES.SCROLLED);\n            }\n        });\n    }\n};\n\n/**\n * Check if there is a visible scrollbar in the given html element.\n *\n * @param {object} htmlNode The html element.\n * @returns {boolean} true if the scroll height is greater than client height.\n */\nconst scrollbarVisible = (htmlNode) => {\n   return htmlNode.scrollHeight > htmlNode.clientHeight;\n};\n\n/**\n * Set the last used attribute for the last used toggle button for a drawer.\n *\n * @param {object} toggleButton The clicked button.\n */\nconst setLastUsedToggle = (toggleButton) => {\n    if (toggleButton.dataset.target) {\n        document.querySelectorAll(`${SELECTORS.BUTTONS}[data-target=\"${toggleButton.dataset.target}\"]`)\n        .forEach(btn => {\n            btn.dataset.lastused = false;\n        });\n        toggleButton.dataset.lastused = true;\n    }\n};\n\n/**\n * Set the focus to the last used button to open this drawer.\n * @param {string} target The drawer target.\n */\nconst focusLastUsedToggle = (target) => {\n    const lastUsedButton = document.querySelector(`${SELECTORS.BUTTONS}[data-target=\"${target}\"][data-lastused=\"true\"`);\n    if (lastUsedButton) {\n        lastUsedButton.focus();\n    }\n};\n\n/**\n * Register the event listeners for the drawer.\n *\n * @private\n */\nconst registerListeners = () => {\n    // Listen for show/hide events.\n    document.addEventListener('click', e => {\n        const toggleButton = e.target.closest(SELECTORS.TOGGLEBTN);\n        if (toggleButton && toggleButton.dataset.target) {\n            e.preventDefault();\n            const targetDrawer = document.getElementById(toggleButton.dataset.target);\n            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n            setLastUsedToggle(toggleButton);\n\n            drawerInstance.toggleVisibility();\n        }\n\n        const openDrawerButton = e.target.closest(SELECTORS.OPENBTN);\n        if (openDrawerButton && openDrawerButton.dataset.target) {\n            e.preventDefault();\n            const targetDrawer = document.getElementById(openDrawerButton.dataset.target);\n            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n            setLastUsedToggle(toggleButton);\n\n            drawerInstance.openDrawer();\n        }\n\n        const closeDrawerButton = e.target.closest(SELECTORS.CLOSEBTN);\n        if (closeDrawerButton && closeDrawerButton.dataset.target) {\n            e.preventDefault();\n            const targetDrawer = document.getElementById(closeDrawerButton.dataset.target);\n            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n\n            drawerInstance.closeDrawer();\n            focusLastUsedToggle(closeDrawerButton.dataset.target);\n        }\n    });\n\n    // Close drawer when another drawer opens.\n    document.addEventListener(Drawers.eventTypes.drawerShow, e => {\n        if (isLarge()) {\n            return;\n        }\n        Drawers.closeOtherDrawers(e.detail.drawerInstance);\n    });\n\n    // Tooglers and openers blur listeners.\n    const btnSelector = `${SELECTORS.TOGGLEBTN}, ${SELECTORS.OPENBTN}, ${SELECTORS.CLOSEBTN}`;\n    document.addEventListener('focusout', (e) => {\n        const button = e.target.closest(btnSelector);\n        if (button?.dataset.restoreTooltipOnBlur !== undefined) {\n            enableButtonTooltip(button);\n        }\n    });\n\n    const closeOnResizeListener = () => {\n        if (isSmall()) {\n            let anyOpen = false;\n            drawerMap.forEach(drawerInstance => {\n                disableDrawerTooltips(drawerInstance.drawerNode);\n                if (drawerInstance.isOpen) {\n                    if (drawerInstance.closeOnResize) {\n                        drawerInstance.closeDrawer();\n                    } else {\n                        anyOpen = true;\n                    }\n                }\n            });\n\n            if (anyOpen) {\n                getBackdrop().then(backdrop => backdrop.show()).catch();\n            }\n        } else {\n            drawerMap.forEach(drawerInstance => {\n                enableDrawerTooltips(drawerInstance.drawerNode);\n            });\n            getBackdrop().then(backdrop => backdrop.hide()).catch();\n        }\n    };\n\n    window.addEventListener('resize', debounce(closeOnResizeListener, 400));\n};\n\nscroller();\nregisterListeners();\n\nconst drawers = document.querySelectorAll(SELECTORS.DRAWERS);\ndrawers.forEach(drawerNode => Drawers.getDrawerInstanceForNode(drawerNode));\n"],"names":["backdropPromise","drawerMap","Map","SELECTORS","CLASSES","getBackdrop","Templates","render","then","html","ModalBackdrop","modalBackdrop","getAttachmentPoint","get","addEventListener","e","preventDefault","Drawers","closeAllDrawers","catch","getDrawerOpenButton","drawerId","openButton","document","querySelector","disableDrawerTooltips","drawerNode","id","forEach","button","disableButtonTooltip","enableOnBlur","hasAttribute","tooltip","setAttribute","dataset","originalTitle","disabledToggle","toggle","removeAttribute","restoreTooltipOnBlur","enableButtonTooltip","constructor","undefined","behatFakeDrawer","closeDrawer","focusOnOpenButton","updatePreferences","this","classList","contains","openDrawer","focusOnCloseButton","forceopen","Aria","hide","content","scrollTop","addInnerScrollListener","set","remove","isOpen","closeOnResize","parseInt","has","dispatchEvent","eventname","cancelable","drawerInstance","pendingPromise","Pending","eventTypes","drawerShow","defaultPrevented","unhide","add","preference","M","util","set_user_preference","state","getElementById","backdrop","show","style","overflow","closeButton","setTimeout","focus","resolve","drawerShown","drawerHide","drawerHidden","toggleVisibility","comparisonInstance","scrollbarVisible","htmlNode","scrollHeight","clientHeight","setLastUsedToggle","toggleButton","target","querySelectorAll","btn","lastused","body","drawerLayout","drawerRight","marginRight","window","innerHeight","scroller","closest","targetDrawer","getDrawerInstanceForNode","openDrawerButton","closeDrawerButton","lastUsedButton","focusLastUsedToggle","closeOtherDrawers","detail","btnSelector","anyOpen","registerListeners"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"drawers.min.js","sources":["../src/drawers.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Toggling the visibility of the secondary navigation on mobile.\n *\n * @module     theme_boost/drawers\n * @copyright  2021 Bas Brands\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport ModalBackdrop from 'core/modal_backdrop';\nimport Templates from 'core/templates';\nimport * as Aria from 'core/aria';\nimport {dispatchEvent} from 'core/event_dispatcher';\nimport {debounce} from 'core/utils';\nimport {isSmall, isLarge} from 'core/pagehelpers';\nimport Pending from 'core/pending';\n// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.\nimport jQuery from 'jquery';\n\nlet backdropPromise = null;\n\nconst drawerMap = new Map();\n\nconst SELECTORS = {\n    BUTTONS: '[data-toggler=\"drawers\"]',\n    CLOSEBTN: '[data-toggler=\"drawers\"][data-action=\"closedrawer\"]',\n    OPENBTN: '[data-toggler=\"drawers\"][data-action=\"opendrawer\"]',\n    TOGGLEBTN: '[data-toggler=\"drawers\"][data-action=\"toggle\"]',\n    DRAWERS: '[data-region=\"fixed-drawer\"]',\n    DRAWERCONTENT: '.drawercontent',\n    PAGECONTENT: '#page-content',\n};\n\nconst CLASSES = {\n    SCROLLED: 'scrolled',\n    SHOW: 'show',\n    NOTINITIALISED: 'not-initialized',\n};\n\n/**\n * Pixel thresshold to auto-hide drawers.\n *\n * @type {Number}\n */\nconst THRESHOLD = 20;\n\n/**\n * Try to get the drawer z-index from the page content.\n *\n * @returns {Number|null} the z-index of the drawer.\n * @private\n */\nconst getDrawerZIndex = () => {\n    const drawer = document.querySelector(SELECTORS.DRAWERS);\n    if (!drawer) {\n        return null;\n    }\n    return parseInt(window.getComputedStyle(drawer).zIndex, 10);\n};\n\n/**\n * Add a backdrop to the page.\n *\n * @returns {Promise} rendering of modal backdrop.\n * @private\n */\nconst getBackdrop = () => {\n    if (!backdropPromise) {\n        backdropPromise = Templates.render('core/modal_backdrop', {})\n        .then(html => new ModalBackdrop(html))\n        .then(modalBackdrop => {\n            const drawerZindex = getDrawerZIndex();\n            if (drawerZindex) {\n                modalBackdrop.setZIndex(getDrawerZIndex() - 1);\n            }\n            modalBackdrop.getAttachmentPoint().get(0).addEventListener('click', e => {\n                e.preventDefault();\n                Drawers.closeAllDrawers();\n            });\n            return modalBackdrop;\n        })\n        .catch();\n    }\n    return backdropPromise;\n};\n\n/**\n * Get the button element to open a specific drawer.\n *\n * @param {String} drawerId the drawer element Id\n * @return {HTMLElement|undefined} the open button element\n * @private\n */\nconst getDrawerOpenButton = (drawerId) => {\n    let openButton = document.querySelector(`${SELECTORS.OPENBTN}[data-target=\"${drawerId}\"]`);\n    if (!openButton) {\n        openButton = document.querySelector(`${SELECTORS.TOGGLEBTN}[data-target=\"${drawerId}\"]`);\n    }\n    return openButton;\n};\n\n/**\n * Disable drawer tooltips.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst disableDrawerTooltips = (drawerNode) => {\n    const buttons = [\n        drawerNode.querySelector(SELECTORS.CLOSEBTN),\n        getDrawerOpenButton(drawerNode.id),\n    ];\n    buttons.forEach(button => {\n        if (!button) {\n            return;\n        }\n        disableButtonTooltip(button);\n    });\n};\n\n/**\n * Disable the button tooltips.\n *\n * @param {HTMLElement} button the button element\n * @param {boolean} enableOnBlur if the tooltip must be re-enabled on blur.\n * @private\n */\nconst disableButtonTooltip = (button, enableOnBlur) => {\n    if (button.hasAttribute('data-original-title')) {\n        // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n        jQuery(button).tooltip('disable');\n        button.setAttribute('title', button.dataset.originalTitle);\n    } else {\n        button.dataset.disabledToggle = button.dataset.toggle;\n        button.removeAttribute('data-toggle');\n    }\n    if (enableOnBlur) {\n        button.dataset.restoreTooltipOnBlur = true;\n    }\n};\n\n/**\n * Enable drawer tooltips.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst enableDrawerTooltips = (drawerNode) => {\n    const buttons = [\n        drawerNode.querySelector(SELECTORS.CLOSEBTN),\n        getDrawerOpenButton(drawerNode.id),\n    ];\n    buttons.forEach(button => {\n        if (!button) {\n            return;\n        }\n        enableButtonTooltip(button);\n    });\n};\n\n/**\n * Enable the button tooltips.\n *\n * @param {HTMLElement} button the button element\n * @private\n */\nconst enableButtonTooltip = (button) => {\n    // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n    if (button.hasAttribute('data-original-title')) {\n        jQuery(button).tooltip('enable');\n        button.removeAttribute('title');\n    } else if (button.dataset.disabledToggle) {\n        button.dataset.toggle = button.dataset.disabledToggle;\n        jQuery(button).tooltip();\n    }\n    delete button.dataset.restoreTooltipOnBlur;\n};\n\n/**\n * Add scroll listeners to a drawer element.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst addInnerScrollListener = (drawerNode) => {\n    const content = drawerNode.querySelector(SELECTORS.DRAWERCONTENT);\n    if (!content) {\n        return;\n    }\n    content.addEventListener(\"scroll\", () => {\n        drawerNode.classList.toggle(\n            CLASSES.SCROLLED,\n            content.scrollTop != 0\n        );\n    });\n};\n\n/**\n * The Drawers class is used to control on-screen drawer elements.\n *\n * It handles opening, and closing of drawer elements, as well as more detailed behaviours such as closing a drawer when\n * another drawer is opened, and supports closing a drawer when the screen is resized.\n *\n * Drawers are instantiated on page load, and can also be toggled lazily when toggling any drawer toggle, open button,\n * or close button.\n *\n * A range of show and hide events are also dispatched as detailed in the class\n * {@link module:theme_boost/drawers#eventTypes eventTypes} object.\n *\n * @example <caption>Standard usage</caption>\n *\n * // The module just needs to be included to add drawer support.\n * import 'theme_boost/drawers';\n *\n * @example <caption>Manually open or close any drawer</caption>\n *\n * import Drawers from 'theme_boost/drawers';\n *\n * const myDrawer = Drawers.getDrawerInstanceForNode(document.querySelector('.myDrawerNode');\n * myDrawer.closeDrawer();\n *\n * @example <caption>Listen to the before show event and cancel it</caption>\n *\n * import Drawers from 'theme_boost/drawers';\n *\n * document.addEventListener(Drawers.eventTypes.drawerShow, e => {\n *     // The drawer which will be shown.\n *     window.console.log(e.target);\n *\n *     // The instance of the Drawers class for this drawer.\n *     window.console.log(e.detail.drawerInstance);\n *\n *     // Prevent this drawer from being shown.\n *     e.preventDefault();\n * });\n *\n * @example <caption>Listen to the shown event</caption>\n *\n * document.addEventListener(Drawers.eventTypes.drawerShown, e => {\n *     // The drawer which was shown.\n *     window.console.log(e.target);\n *\n *     // The instance of the Drawers class for this drawer.\n *     window.console.log(e.detail.drawerInstance);\n * });\n */\nexport default class Drawers {\n    /**\n     * The underlying HTMLElement which is controlled.\n     */\n    drawerNode = null;\n\n    /**\n     * The drawer page bounding box dimensions.\n     * @var {DOMRect} boundingRect\n     */\n    boundingRect = null;\n\n    constructor(drawerNode) {\n        // Some behat tests may use fake drawer divs to test components in drawers.\n        if (drawerNode.dataset.behatFakeDrawer !== undefined) {\n            return;\n        }\n\n        this.drawerNode = drawerNode;\n\n        if (isSmall()) {\n            this.closeDrawer({focusOnOpenButton: false, updatePreferences: false});\n        }\n\n        if (this.drawerNode.classList.contains(CLASSES.SHOW)) {\n            this.openDrawer({focusOnCloseButton: false});\n        } else if (this.drawerNode.dataset.forceopen == 1) {\n            if (!isSmall()) {\n                this.openDrawer({focusOnCloseButton: false});\n            }\n        } else {\n            Aria.hide(this.drawerNode);\n        }\n\n        // Disable tooltips in small screens.\n        if (isSmall()) {\n            disableDrawerTooltips(this.drawerNode);\n        }\n\n        addInnerScrollListener(this.drawerNode);\n\n        drawerMap.set(drawerNode, this);\n\n        drawerNode.classList.remove(CLASSES.NOTINITIALISED);\n    }\n\n    /**\n     * Whether the drawer is open.\n     *\n     * @returns {boolean}\n     */\n    get isOpen() {\n        return this.drawerNode.classList.contains(CLASSES.SHOW);\n    }\n\n    /**\n     * Whether the drawer should close when the window is resized\n     *\n     * @returns {boolean}\n     */\n    get closeOnResize() {\n        return !!parseInt(this.drawerNode.dataset.closeOnResize);\n    }\n\n    /**\n     * The list of event types.\n     *\n     * @static\n     * @property {String} drawerShow See {@link event:theme_boost/drawers:show}\n     * @property {String} drawerShown See {@link event:theme_boost/drawers:shown}\n     * @property {String} drawerHide See {@link event:theme_boost/drawers:hide}\n     * @property {String} drawerHidden See {@link event:theme_boost/drawers:hidden}\n     */\n    static eventTypes = {\n        /**\n         * An event triggered before a drawer is shown.\n         *\n         * @event theme_boost/drawers:show\n         * @type {CustomEvent}\n         * @property {HTMLElement} target The drawer that will be opened.\n         */\n        drawerShow: 'theme_boost/drawers:show',\n\n        /**\n         * An event triggered after a drawer is shown.\n         *\n         * @event theme_boost/drawers:shown\n         * @type {CustomEvent}\n         * @property {HTMLElement} target The drawer that was be opened.\n         */\n        drawerShown: 'theme_boost/drawers:shown',\n\n        /**\n         * An event triggered before a drawer is hidden.\n         *\n         * @event theme_boost/drawers:hide\n         * @type {CustomEvent}\n         * @property {HTMLElement} target The drawer that will be hidden.\n         */\n        drawerHide: 'theme_boost/drawers:hide',\n\n        /**\n         * An event triggered after a drawer is hidden.\n         *\n         * @event theme_boost/drawers:hidden\n         * @type {CustomEvent}\n         * @property {HTMLElement} target The drawer that was be hidden.\n         */\n        drawerHidden: 'theme_boost/drawers:hidden',\n    };\n\n\n    /**\n     * Get the drawer instance for the specified node\n     *\n     * @param {HTMLElement} drawerNode\n     * @returns {module:theme_boost/drawers}\n     */\n    static getDrawerInstanceForNode(drawerNode) {\n        if (!drawerMap.has(drawerNode)) {\n            new Drawers(drawerNode);\n        }\n\n        return drawerMap.get(drawerNode);\n    }\n\n    /**\n     * Dispatch a drawer event.\n     *\n     * @param {string} eventname the event name\n     * @param {boolean} cancelable if the event is cancelable\n     * @returns {CustomEvent} the resulting custom event\n     */\n    dispatchEvent(eventname, cancelable = false) {\n        return dispatchEvent(\n            eventname,\n            {\n                drawerInstance: this,\n            },\n            this.drawerNode,\n            {\n                cancelable,\n            }\n        );\n    }\n\n    /**\n     * Open the drawer.\n     *\n     * By default, openDrawer sets the page focus to the close drawer button. However, when a drawer is open at page\n     * load, this represents an accessibility problem as the initial focus changes without any user interaction. The\n     * focusOnCloseButton parameter can be set to false to prevent this behaviour.\n     *\n     * @param {object} args\n     * @param {boolean} [args.focusOnCloseButton=true] Whether to alter page focus when opening the drawer\n     */\n    openDrawer({focusOnCloseButton = true} = {}) {\n\n        const pendingPromise = new Pending('theme_boost/drawers:open');\n        const showEvent = this.dispatchEvent(Drawers.eventTypes.drawerShow, true);\n        if (showEvent.defaultPrevented) {\n            return;\n        }\n\n        // Hide close button while the drawer is showing to prevent glitchy effects.\n        this.drawerNode.querySelector(SELECTORS.CLOSEBTN)?.classList.toggle('hidden', true);\n\n        // Remove open tooltip if still visible.\n        let openButton = getDrawerOpenButton(this.drawerNode.id);\n        if (openButton && openButton.hasAttribute('data-original-title')) {\n            // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n            jQuery(openButton)?.tooltip('hide');\n        }\n\n        Aria.unhide(this.drawerNode);\n        this.drawerNode.classList.add(CLASSES.SHOW);\n\n        const preference = this.drawerNode.dataset.preference;\n        if (preference && !isSmall() && (this.drawerNode.dataset.forceopen != 1)) {\n            M.util.set_user_preference(preference, true);\n        }\n\n        const state = this.drawerNode.dataset.state;\n        if (state) {\n            const page = document.getElementById('page');\n            page.classList.add(state);\n        }\n\n        this.boundingRect = this.drawerNode.getBoundingClientRect();\n\n        if (isSmall()) {\n            getBackdrop().then(backdrop => {\n                backdrop.show();\n\n                const pageWrapper = document.getElementById('page');\n                pageWrapper.style.overflow = 'hidden';\n                return backdrop;\n            })\n            .catch();\n        }\n\n        // Show close button once the drawer is fully opened.\n        const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);\n        if (focusOnCloseButton && closeButton) {\n            disableButtonTooltip(closeButton, true);\n        }\n        setTimeout(() => {\n            closeButton.classList.toggle('hidden', false);\n            if (focusOnCloseButton) {\n                closeButton.focus();\n            }\n            pendingPromise.resolve();\n        }, 300);\n\n        this.dispatchEvent(Drawers.eventTypes.drawerShown);\n    }\n\n    /**\n     * Close the drawer.\n     *\n     * @param {object} args\n     * @param {boolean} [args.focusOnOpenButton=true] Whether to alter page focus when opening the drawer\n     * @param {boolean} [args.updatePreferences=true] Whether to update the user prewference\n     */\n    closeDrawer({focusOnOpenButton = true, updatePreferences = true} = {}) {\n\n        const pendingPromise = new Pending('theme_boost/drawers:close');\n\n        const hideEvent = this.dispatchEvent(Drawers.eventTypes.drawerHide, true);\n        if (hideEvent.defaultPrevented) {\n            return;\n        }\n\n        // Hide close button while the drawer is hiding to prevent glitchy effects.\n        const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);\n        closeButton?.classList.toggle('hidden', true);\n        // Remove the close button tooltip if visible.\n        if (closeButton.hasAttribute('data-original-title')) {\n            // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n            jQuery(closeButton)?.tooltip('hide');\n        }\n\n        const preference = this.drawerNode.dataset.preference;\n        if (preference && updatePreferences && !isSmall()) {\n            M.util.set_user_preference(preference, false);\n        }\n\n        const state = this.drawerNode.dataset.state;\n        if (state) {\n            const page = document.getElementById('page');\n            page.classList.remove(state);\n        }\n\n        Aria.hide(this.drawerNode);\n        this.drawerNode.classList.remove(CLASSES.SHOW);\n\n        getBackdrop().then(backdrop => {\n            backdrop.hide();\n\n            if (isSmall()) {\n                const pageWrapper = document.getElementById('page');\n                pageWrapper.style.overflow = 'visible';\n            }\n            return backdrop;\n        })\n        .catch();\n\n        // Move focus to the open drawer (or toggler) button once the drawer is hidden.\n        let openButton = getDrawerOpenButton(this.drawerNode.id);\n        if (openButton) {\n            disableButtonTooltip(openButton, true);\n        }\n        setTimeout(() => {\n            if (openButton && focusOnOpenButton) {\n                openButton.focus();\n            }\n            pendingPromise.resolve();\n        }, 300);\n\n        this.dispatchEvent(Drawers.eventTypes.drawerHidden);\n    }\n\n    /**\n     * Toggle visibility of the drawer.\n     */\n    toggleVisibility() {\n        if (this.drawerNode.classList.contains(CLASSES.SHOW)) {\n            this.closeDrawer();\n        } else {\n            this.openDrawer();\n        }\n    }\n\n    /**\n     * Displaces the drawer outsite the page.\n     *\n     * @param {Number} scrollPosition the page current scroll position\n     */\n    displace(scrollPosition) {\n        let displace = scrollPosition;\n        let openButton = getDrawerOpenButton(this.drawerNode.id);\n        if (scrollPosition === 0) {\n            this.drawerNode.style.transform = '';\n            if (openButton) {\n                openButton.style.transform = '';\n            }\n            return;\n        }\n        const state = this.drawerNode.dataset?.state;\n        const drawrWidth = this.drawerNode.offsetWidth;\n        let scrollThreshold = drawrWidth;\n        let direction = -1;\n        if (state === 'show-drawer-right') {\n            direction = 1;\n            scrollThreshold = THRESHOLD;\n        }\n        if (scrollPosition > scrollThreshold) {\n            displace = drawrWidth + THRESHOLD;\n        }\n        displace *= direction;\n        const transform = `translateX(${displace}px)`;\n        if (openButton) {\n            openButton.style.transform = transform;\n        }\n        this.drawerNode.style.transform = transform;\n    }\n\n    /**\n     * Prevent drawer from overlapping an element.\n     *\n     * @param {HTMLElement} currentFocus\n     */\n    preventOverlap(currentFocus) {\n        if (!this.isOpen) {\n            return;\n        }\n        const drawrWidth = this.drawerNode.offsetWidth;\n        const element = currentFocus.getBoundingClientRect();\n        const drawer = this.boundingRect;\n        const overlapping = (\n            (element.right + THRESHOLD) > drawer.left &&\n            (element.left - THRESHOLD) < drawer.right\n        );\n        if (overlapping) {\n            // Force drawer to displace out of the page.\n            this.displace(drawrWidth + 1);\n        } else {\n            // Reset drawer displacement.\n            this.displace(window.scrollX);\n        }\n    }\n\n    /**\n     * Close all drawers.\n     */\n    static closeAllDrawers() {\n        drawerMap.forEach(drawerInstance => {\n            drawerInstance.closeDrawer();\n        });\n    }\n\n    /**\n     * Close all drawers except for the specified drawer.\n     *\n     * @param {module:theme_boost/drawers} comparisonInstance\n     */\n    static closeOtherDrawers(comparisonInstance) {\n        drawerMap.forEach(drawerInstance => {\n            if (drawerInstance === comparisonInstance) {\n                return;\n            }\n\n            drawerInstance.closeDrawer();\n        });\n    }\n\n    /**\n     * Prevent drawers from covering the focused element.\n     */\n    static preventCoveringFocusedElement() {\n        const currentFocus = document.activeElement;\n        // Focus on page layout elements should be ignored.\n        const pagecontent = document.querySelector(SELECTORS.PAGECONTENT);\n        if (!currentFocus || !pagecontent?.contains(currentFocus)) {\n            Drawers.displaceDrawers(window.scrollX);\n            return;\n        }\n        drawerMap.forEach(drawerInstance => {\n            drawerInstance.preventOverlap(currentFocus);\n        });\n    }\n\n    /**\n     * Prevent drawer from covering the content when the page content covers the full page.\n     *\n     * @param {Number} displace\n     */\n    static displaceDrawers(displace) {\n        drawerMap.forEach(drawerInstance => {\n            drawerInstance.displace(displace);\n        });\n    }\n}\n\n/**\n * Set the last used attribute for the last used toggle button for a drawer.\n *\n * @param {object} toggleButton The clicked button.\n */\nconst setLastUsedToggle = (toggleButton) => {\n    if (toggleButton.dataset.target) {\n        document.querySelectorAll(`${SELECTORS.BUTTONS}[data-target=\"${toggleButton.dataset.target}\"]`)\n        .forEach(btn => {\n            btn.dataset.lastused = false;\n        });\n        toggleButton.dataset.lastused = true;\n    }\n};\n\n/**\n * Set the focus to the last used button to open this drawer.\n * @param {string} target The drawer target.\n */\nconst focusLastUsedToggle = (target) => {\n    const lastUsedButton = document.querySelector(`${SELECTORS.BUTTONS}[data-target=\"${target}\"][data-lastused=\"true\"`);\n    if (lastUsedButton) {\n        lastUsedButton.focus();\n    }\n};\n\n/**\n * Register the event listeners for the drawer.\n *\n * @private\n */\nconst registerListeners = () => {\n    // Listen for show/hide events.\n    document.addEventListener('click', e => {\n        const toggleButton = e.target.closest(SELECTORS.TOGGLEBTN);\n        if (toggleButton && toggleButton.dataset.target) {\n            e.preventDefault();\n            const targetDrawer = document.getElementById(toggleButton.dataset.target);\n            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n            setLastUsedToggle(toggleButton);\n\n            drawerInstance.toggleVisibility();\n        }\n\n        const openDrawerButton = e.target.closest(SELECTORS.OPENBTN);\n        if (openDrawerButton && openDrawerButton.dataset.target) {\n            e.preventDefault();\n            const targetDrawer = document.getElementById(openDrawerButton.dataset.target);\n            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n            setLastUsedToggle(toggleButton);\n\n            drawerInstance.openDrawer();\n        }\n\n        const closeDrawerButton = e.target.closest(SELECTORS.CLOSEBTN);\n        if (closeDrawerButton && closeDrawerButton.dataset.target) {\n            e.preventDefault();\n            const targetDrawer = document.getElementById(closeDrawerButton.dataset.target);\n            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n\n            drawerInstance.closeDrawer();\n            focusLastUsedToggle(closeDrawerButton.dataset.target);\n        }\n    });\n\n    // Close drawer when another drawer opens.\n    document.addEventListener(Drawers.eventTypes.drawerShow, e => {\n        if (isLarge()) {\n            return;\n        }\n        Drawers.closeOtherDrawers(e.detail.drawerInstance);\n    });\n\n    // Tooglers and openers blur listeners.\n    const btnSelector = `${SELECTORS.TOGGLEBTN}, ${SELECTORS.OPENBTN}, ${SELECTORS.CLOSEBTN}`;\n    document.addEventListener('focusout', (e) => {\n        const button = e.target.closest(btnSelector);\n        if (button?.dataset.restoreTooltipOnBlur !== undefined) {\n            enableButtonTooltip(button);\n        }\n    });\n\n    const closeOnResizeListener = () => {\n        if (isSmall()) {\n            let anyOpen = false;\n            drawerMap.forEach(drawerInstance => {\n                disableDrawerTooltips(drawerInstance.drawerNode);\n                if (drawerInstance.isOpen) {\n                    if (drawerInstance.closeOnResize) {\n                        drawerInstance.closeDrawer();\n                    } else {\n                        anyOpen = true;\n                    }\n                }\n            });\n\n            if (anyOpen) {\n                getBackdrop().then(backdrop => backdrop.show()).catch();\n            }\n        } else {\n            drawerMap.forEach(drawerInstance => {\n                enableDrawerTooltips(drawerInstance.drawerNode);\n            });\n            getBackdrop().then(backdrop => backdrop.hide()).catch();\n        }\n    };\n\n    document.addEventListener('scroll', () => {\n        const body = document.querySelector('body');\n        if (window.scrollY >= window.innerHeight) {\n            body.classList.add(CLASSES.SCROLLED);\n        } else {\n            body.classList.remove(CLASSES.SCROLLED);\n        }\n        // Horizontal scroll listener to displace the drawers to prevent covering\n        // any possible sticky content.\n        Drawers.displaceDrawers(window.scrollX);\n    });\n\n    const preventOverlap = debounce(Drawers.preventCoveringFocusedElement, 100);\n    document.addEventListener('focusin', preventOverlap);\n    document.addEventListener('focusout', preventOverlap);\n\n    window.addEventListener('resize', debounce(closeOnResizeListener, 400));\n};\n\nregisterListeners();\n\nconst drawers = document.querySelectorAll(SELECTORS.DRAWERS);\ndrawers.forEach(drawerNode => Drawers.getDrawerInstanceForNode(drawerNode));\n"],"names":["backdropPromise","drawerMap","Map","SELECTORS","CLASSES","getDrawerZIndex","drawer","document","querySelector","parseInt","window","getComputedStyle","zIndex","getBackdrop","Templates","render","then","html","ModalBackdrop","modalBackdrop","setZIndex","getAttachmentPoint","get","addEventListener","e","preventDefault","Drawers","closeAllDrawers","catch","getDrawerOpenButton","drawerId","openButton","disableDrawerTooltips","drawerNode","id","forEach","button","disableButtonTooltip","enableOnBlur","hasAttribute","tooltip","setAttribute","dataset","originalTitle","disabledToggle","toggle","removeAttribute","restoreTooltipOnBlur","enableButtonTooltip","constructor","undefined","behatFakeDrawer","closeDrawer","focusOnOpenButton","updatePreferences","this","classList","contains","openDrawer","focusOnCloseButton","forceopen","Aria","hide","content","scrollTop","addInnerScrollListener","set","remove","isOpen","closeOnResize","has","dispatchEvent","eventname","cancelable","drawerInstance","pendingPromise","Pending","eventTypes","drawerShow","defaultPrevented","unhide","add","preference","M","util","set_user_preference","state","getElementById","boundingRect","getBoundingClientRect","backdrop","show","style","overflow","closeButton","setTimeout","focus","resolve","drawerShown","drawerHide","drawerHidden","toggleVisibility","displace","scrollPosition","transform","_this$drawerNode$data","drawrWidth","offsetWidth","scrollThreshold","direction","preventOverlap","currentFocus","element","right","left","scrollX","comparisonInstance","activeElement","pagecontent","displaceDrawers","setLastUsedToggle","toggleButton","target","querySelectorAll","btn","lastused","closest","targetDrawer","getDrawerInstanceForNode","openDrawerButton","closeDrawerButton","lastUsedButton","focusLastUsedToggle","closeOtherDrawers","detail","btnSelector","body","scrollY","innerHeight","preventCoveringFocusedElement","anyOpen","registerListeners"],"mappings":"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"}
\ No newline at end of file
diff --git a/theme/boost/amd/build/footer-popover.min.js b/theme/boost/amd/build/footer-popover.min.js
index 5567c3f625b..99311190bff 100644
--- a/theme/boost/amd/build/footer-popover.min.js
+++ b/theme/boost/amd/build/footer-popover.min.js
@@ -5,6 +5,6 @@ define("theme_boost/footer-popover",["exports","jquery","./popover"],(function(_
    * @module     theme_boost/footer-popover
    * @copyright  2021 Bas Brands
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),Object.defineProperty(_exports,"Popover",{enumerable:!0,get:function(){return _popover.default}}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_popover=_interopRequireDefault(_popover);const SELECTORS_FOOTERCONTAINER='[data-region="footer-container-popover"]',SELECTORS_FOOTERCONTENT='[data-region="footer-content-popover"]',SELECTORS_FOOTERBUTTON='[data-action="footer-popover"]';let footerIsShown=!1;_exports.init=()=>{const container=document.querySelector(SELECTORS_FOOTERCONTAINER),footerButton=document.querySelector(SELECTORS_FOOTERBUTTON);(0,_jquery.default)(footerButton).popover({content:getFooterContent,container:container,html:!0,placement:"top",customClass:"footer",trigger:"click"}),document.addEventListener("click",(e=>{footerIsShown&&!e.target.closest(SELECTORS_FOOTERCONTAINER)&&(0,_jquery.default)(footerButton).popover("hide")}),!0),document.addEventListener("keydown",(e=>{footerIsShown&&"Escape"===e.key&&((0,_jquery.default)(footerButton).popover("hide"),footerButton.focus())})),document.addEventListener("focus",(e=>{footerIsShown&&!e.target.closest(SELECTORS_FOOTERCONTAINER)&&(0,_jquery.default)(footerButton).popover("hide")}),!0),(0,_jquery.default)(footerButton).on("show.bs.popover",(()=>{footerIsShown=!0})),(0,_jquery.default)(footerButton).on("hide.bs.popover",(()=>{footerIsShown=!1}))};const getFooterContent=()=>document.querySelector(SELECTORS_FOOTERCONTENT).innerHTML}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),Object.defineProperty(_exports,"Popover",{enumerable:!0,get:function(){return _popover.default}}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_popover=_interopRequireDefault(_popover);const SELECTORS_FOOTERCONTAINER='[data-region="footer-container-popover"]',SELECTORS_FOOTERCONTENT='[data-region="footer-content-popover"]',SELECTORS_FOOTERBUTTON='[data-action="footer-popover"]';let footerIsShown=!1;_exports.init=()=>{const container=document.querySelector(SELECTORS_FOOTERCONTAINER),footerButton=document.querySelector(SELECTORS_FOOTERBUTTON);(0,_jquery.default)(footerButton).popover({content:getFooterContent,container:container,html:!0,placement:"top",customClass:"footer",trigger:"click",boundary:"viewport",popperConfig:{modifiers:{preventOverflow:{boundariesElement:"viewport",padding:48},offset:{},flip:{behavior:"flip"},arrow:{element:".arrow"}}}}),document.addEventListener("click",(e=>{footerIsShown&&!e.target.closest(SELECTORS_FOOTERCONTAINER)&&(0,_jquery.default)(footerButton).popover("hide")}),!0),document.addEventListener("keydown",(e=>{footerIsShown&&"Escape"===e.key&&((0,_jquery.default)(footerButton).popover("hide"),footerButton.focus())})),document.addEventListener("focus",(e=>{footerIsShown&&!e.target.closest(SELECTORS_FOOTERCONTAINER)&&(0,_jquery.default)(footerButton).popover("hide")}),!0),(0,_jquery.default)(footerButton).on("show.bs.popover",(()=>{footerIsShown=!0})),(0,_jquery.default)(footerButton).on("hide.bs.popover",(()=>{footerIsShown=!1}))};const getFooterContent=()=>document.querySelector(SELECTORS_FOOTERCONTENT).innerHTML}));
 
 //# sourceMappingURL=footer-popover.min.js.map
\ No newline at end of file
diff --git a/theme/boost/amd/build/footer-popover.min.js.map b/theme/boost/amd/build/footer-popover.min.js.map
index c56b015fd7a..63b6bcba35e 100644
--- a/theme/boost/amd/build/footer-popover.min.js.map
+++ b/theme/boost/amd/build/footer-popover.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"footer-popover.min.js","sources":["../src/footer-popover.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Shows the footer content in a popover.\n *\n * @module     theme_boost/footer-popover\n * @copyright  2021 Bas Brands\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport $ from 'jquery';\nimport Popover from './popover';\n\nconst SELECTORS = {\n    FOOTERCONTAINER: '[data-region=\"footer-container-popover\"]',\n    FOOTERCONTENT: '[data-region=\"footer-content-popover\"]',\n    FOOTERBUTTON: '[data-action=\"footer-popover\"]'\n};\n\nlet footerIsShown = false;\n\nexport const init = () => {\n    const container = document.querySelector(SELECTORS.FOOTERCONTAINER);\n    const footerButton = document.querySelector(SELECTORS.FOOTERBUTTON);\n\n    // All jQuery in this code can be replaced when MDL-71979 is integrated.\n    $(footerButton).popover({\n        content: getFooterContent,\n        container: container,\n        html: true,\n        placement: 'top',\n        customClass: 'footer',\n        trigger: 'click'\n    });\n\n    document.addEventListener('click', e => {\n        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {\n            $(footerButton).popover('hide');\n        }\n    },\n    true);\n\n    document.addEventListener('keydown', e => {\n        if (footerIsShown && e.key === 'Escape') {\n            $(footerButton).popover('hide');\n            footerButton.focus();\n        }\n    });\n\n    document.addEventListener('focus', e => {\n        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {\n            $(footerButton).popover('hide');\n        }\n    },\n    true);\n\n    $(footerButton).on('show.bs.popover', () => {\n        footerIsShown = true;\n    });\n\n    $(footerButton).on('hide.bs.popover', () => {\n        footerIsShown = false;\n    });\n};\n\n/**\n * Get the footer content for popover.\n *\n * @returns {String} HTML string\n * @private\n */\nconst getFooterContent = () => {\n    return document.querySelector(SELECTORS.FOOTERCONTENT).innerHTML;\n};\n\nexport {\n    Popover\n};\n"],"names":["SELECTORS","footerIsShown","container","document","querySelector","footerButton","popover","content","getFooterContent","html","placement","customClass","trigger","addEventListener","e","target","closest","key","focus","on","innerHTML"],"mappings":";;;;;;;4QA0BMA,0BACe,2CADfA,wBAEa,yCAFbA,uBAGY,qCAGdC,eAAgB,gBAEA,WACVC,UAAYC,SAASC,cAAcJ,2BACnCK,aAAeF,SAASC,cAAcJ,4CAG1CK,cAAcC,QAAQ,CACpBC,QAASC,iBACTN,UAAWA,UACXO,MAAM,EACNC,UAAW,MACXC,YAAa,SACbC,QAAS,UAGbT,SAASU,iBAAiB,SAASC,IAC3Bb,gBAAkBa,EAAEC,OAAOC,QAAQhB,gDACjCK,cAAcC,QAAQ,WAGhC,GAEAH,SAASU,iBAAiB,WAAWC,IAC7Bb,eAA2B,WAAVa,EAAEG,0BACjBZ,cAAcC,QAAQ,QACxBD,aAAaa,YAIrBf,SAASU,iBAAiB,SAASC,IAC3Bb,gBAAkBa,EAAEC,OAAOC,QAAQhB,gDACjCK,cAAcC,QAAQ,WAGhC,uBAEED,cAAcc,GAAG,mBAAmB,KAClClB,eAAgB,yBAGlBI,cAAcc,GAAG,mBAAmB,KAClClB,eAAgB,YAUlBO,iBAAmB,IACdL,SAASC,cAAcJ,yBAAyBoB"}
\ No newline at end of file
+{"version":3,"file":"footer-popover.min.js","sources":["../src/footer-popover.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Shows the footer content in a popover.\n *\n * @module     theme_boost/footer-popover\n * @copyright  2021 Bas Brands\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport $ from 'jquery';\nimport Popover from './popover';\n\nconst SELECTORS = {\n    FOOTERCONTAINER: '[data-region=\"footer-container-popover\"]',\n    FOOTERCONTENT: '[data-region=\"footer-content-popover\"]',\n    FOOTERBUTTON: '[data-action=\"footer-popover\"]'\n};\n\nlet footerIsShown = false;\n\nexport const init = () => {\n    const container = document.querySelector(SELECTORS.FOOTERCONTAINER);\n    const footerButton = document.querySelector(SELECTORS.FOOTERBUTTON);\n\n    // All jQuery in this code can be replaced when MDL-71979 is integrated.\n    $(footerButton).popover({\n        content: getFooterContent,\n        container: container,\n        html: true,\n        placement: 'top',\n        customClass: 'footer',\n        trigger: 'click',\n        boundary: 'viewport',\n        popperConfig: {\n            modifiers: {\n                preventOverflow: {\n                    boundariesElement: 'viewport',\n                    padding: 48\n                },\n                offset: {},\n                flip: {\n                    behavior: 'flip'\n                },\n                arrow: {\n                    element: '.arrow'\n                },\n            }\n        }\n    });\n\n    document.addEventListener('click', e => {\n        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {\n            $(footerButton).popover('hide');\n        }\n    },\n    true);\n\n    document.addEventListener('keydown', e => {\n        if (footerIsShown && e.key === 'Escape') {\n            $(footerButton).popover('hide');\n            footerButton.focus();\n        }\n    });\n\n    document.addEventListener('focus', e => {\n        if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {\n            $(footerButton).popover('hide');\n        }\n    },\n    true);\n\n    $(footerButton).on('show.bs.popover', () => {\n        footerIsShown = true;\n    });\n\n    $(footerButton).on('hide.bs.popover', () => {\n        footerIsShown = false;\n    });\n};\n\n/**\n * Get the footer content for popover.\n *\n * @returns {String} HTML string\n * @private\n */\nconst getFooterContent = () => {\n    return document.querySelector(SELECTORS.FOOTERCONTENT).innerHTML;\n};\n\nexport {\n    Popover\n};\n"],"names":["SELECTORS","footerIsShown","container","document","querySelector","footerButton","popover","content","getFooterContent","html","placement","customClass","trigger","boundary","popperConfig","modifiers","preventOverflow","boundariesElement","padding","offset","flip","behavior","arrow","element","addEventListener","e","target","closest","key","focus","on","innerHTML"],"mappings":";;;;;;;4QA0BMA,0BACe,2CADfA,wBAEa,yCAFbA,uBAGY,qCAGdC,eAAgB,gBAEA,WACVC,UAAYC,SAASC,cAAcJ,2BACnCK,aAAeF,SAASC,cAAcJ,4CAG1CK,cAAcC,QAAQ,CACpBC,QAASC,iBACTN,UAAWA,UACXO,MAAM,EACNC,UAAW,MACXC,YAAa,SACbC,QAAS,QACTC,SAAU,WACVC,aAAc,CACVC,UAAW,CACPC,gBAAiB,CACbC,kBAAmB,WACnBC,QAAS,IAEbC,OAAQ,GACRC,KAAM,CACFC,SAAU,QAEdC,MAAO,CACHC,QAAS,cAMzBpB,SAASqB,iBAAiB,SAASC,IAC3BxB,gBAAkBwB,EAAEC,OAAOC,QAAQ3B,gDACjCK,cAAcC,QAAQ,WAGhC,GAEAH,SAASqB,iBAAiB,WAAWC,IAC7BxB,eAA2B,WAAVwB,EAAEG,0BACjBvB,cAAcC,QAAQ,QACxBD,aAAawB,YAIrB1B,SAASqB,iBAAiB,SAASC,IAC3BxB,gBAAkBwB,EAAEC,OAAOC,QAAQ3B,gDACjCK,cAAcC,QAAQ,WAGhC,uBAEED,cAAcyB,GAAG,mBAAmB,KAClC7B,eAAgB,yBAGlBI,cAAcyB,GAAG,mBAAmB,KAClC7B,eAAgB,YAUlBO,iBAAmB,IACdL,SAASC,cAAcJ,yBAAyB+B"}
\ No newline at end of file
diff --git a/theme/boost/amd/build/sticky-footer.min.js b/theme/boost/amd/build/sticky-footer.min.js
index b82ecc633b0..a8b7d48dd94 100644
--- a/theme/boost/amd/build/sticky-footer.min.js
+++ b/theme/boost/amd/build/sticky-footer.min.js
@@ -5,6 +5,6 @@ define("theme_boost/sticky-footer",["exports","core/pending","core/sticky-footer
    * @module     theme_boost/sticky-footer
    * @copyright  2022 Ferran Recio <ferran@moodle.com>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=_exports.enableStickyFooter=_exports.disableStickyFooter=void 0,_pending=(obj=_pending)&&obj.__esModule?obj:{default:obj};const SELECTORS_STICKYFOOTER=".stickyfooter",SELECTORS_PAGE="#page",CLASSES_HASSTICKYFOOTER="hasstickyfooter";let initialized=!1,previousScrollPosition=0,enabled=!1;const scrollSpy=()=>{if(!enabled)return;if(document.body.clientWidth>=768)return;let scrollPosition=(()=>{const page=document.querySelector(SELECTORS_PAGE);return page?page.scrollTop:window.pageYOffset})();scrollPosition>previousScrollPosition?hideStickyFooter():showStickyFooter(),previousScrollPosition=scrollPosition},showStickyFooter=()=>{const pendingPromise=new _pending.default("theme_boost/sticky-footer:enabling"),footer=document.querySelector(SELECTORS_STICKYFOOTER),page=document.querySelector(SELECTORS_PAGE);footer&&page&&(document.body.classList.add(CLASSES_HASSTICKYFOOTER),page.classList.add(CLASSES_HASSTICKYFOOTER)),setTimeout((()=>pendingPromise.resolve()),1e3)},hideStickyFooter=()=>{document.body.classList.remove(CLASSES_HASSTICKYFOOTER);const page=document.querySelector(SELECTORS_PAGE);null==page||page.classList.remove(CLASSES_HASSTICKYFOOTER)},enableStickyFooter=()=>{enabled=!0,showStickyFooter()};_exports.enableStickyFooter=enableStickyFooter;const disableStickyFooter=()=>{enabled=!1,hideStickyFooter()};_exports.disableStickyFooter=disableStickyFooter;_exports.init=()=>{var _document$querySelect;if(initialized||document.body.classList.contains("behat-site"))return void(0,_stickyFooter.init)();initialized=!0,(()=>{const footer=document.querySelector(SELECTORS_STICKYFOOTER);return!!footer&&!!footer.dataset.disable})()||enableStickyFooter();(null!==(_document$querySelect=document.querySelector(SELECTORS_PAGE))&&void 0!==_document$querySelect?_document$querySelect:document.body).addEventListener("scroll",scrollSpy),(0,_stickyFooter.registerManager)({enableStickyFooter:enableStickyFooter,disableStickyFooter:disableStickyFooter})}}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=_exports.enableStickyFooter=_exports.disableStickyFooter=void 0,_pending=(obj=_pending)&&obj.__esModule?obj:{default:obj};const SELECTORS_STICKYFOOTER=".stickyfooter",SELECTORS_PAGE="#page",CLASSES_HASSTICKYFOOTER="hasstickyfooter";let initialized=!1,previousScrollPosition=0,enabled=!1;const scrollSpy=()=>{if(!enabled)return;if(document.body.clientWidth>=768)return;let scrollPosition=window.scrollY;scrollPosition>previousScrollPosition?hideStickyFooter():showStickyFooter(),previousScrollPosition=scrollPosition},showStickyFooter=()=>{const pendingPromise=new _pending.default("theme_boost/sticky-footer:enabling"),footer=document.querySelector(SELECTORS_STICKYFOOTER),page=document.querySelector(SELECTORS_PAGE);footer&&page&&(document.body.classList.add(CLASSES_HASSTICKYFOOTER),page.classList.add(CLASSES_HASSTICKYFOOTER)),setTimeout((()=>pendingPromise.resolve()),1e3)},hideStickyFooter=()=>{document.body.classList.remove(CLASSES_HASSTICKYFOOTER);const page=document.querySelector(SELECTORS_PAGE);null==page||page.classList.remove(CLASSES_HASSTICKYFOOTER)},enableStickyFooter=()=>{enabled=!0,showStickyFooter()};_exports.enableStickyFooter=enableStickyFooter;const disableStickyFooter=()=>{enabled=!1,hideStickyFooter()};_exports.disableStickyFooter=disableStickyFooter;_exports.init=()=>{initialized||document.body.classList.contains("behat-site")?(0,_stickyFooter.init)():(initialized=!0,(()=>{const footer=document.querySelector(SELECTORS_STICKYFOOTER);return!!footer&&!!footer.dataset.disable})()||enableStickyFooter(),document.addEventListener("scroll",scrollSpy),(0,_stickyFooter.registerManager)({enableStickyFooter:enableStickyFooter,disableStickyFooter:disableStickyFooter}))}}));
 
 //# sourceMappingURL=sticky-footer.min.js.map
\ No newline at end of file
diff --git a/theme/boost/amd/build/sticky-footer.min.js.map b/theme/boost/amd/build/sticky-footer.min.js.map
index e659a89feb3..3b7a09661b6 100644
--- a/theme/boost/amd/build/sticky-footer.min.js.map
+++ b/theme/boost/amd/build/sticky-footer.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"sticky-footer.min.js","sources":["../src/sticky-footer.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Sticky footer module.\n *\n * @module     theme_boost/sticky-footer\n * @copyright  2022 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Pending from 'core/pending';\nimport {registerManager, init as defaultInit} from 'core/sticky-footer';\n\nconst SELECTORS = {\n    STICKYFOOTER: '.stickyfooter',\n    PAGE: '#page',\n};\n\nconst CLASSES = {\n    HASSTICKYFOOTER: 'hasstickyfooter',\n};\n\nlet initialized = false;\n\nlet previousScrollPosition = 0;\n\nlet enabled = false;\n\n/**\n * Return the current page scroll position.\n * @package\n * @returns {number} the current scroll position\n */\nconst getScrollPosition = () => {\n    const page = document.querySelector(SELECTORS.PAGE);\n    if (page) {\n        return page.scrollTop;\n    }\n    return window.pageYOffset;\n};\n\n/**\n * Scroll handler.\n * @package\n */\nconst scrollSpy = () => {\n    if (!enabled) {\n        return;\n    }\n    // Ignore scroll if page size is not small.\n    if (document.body.clientWidth >= 768) {\n        return;\n    }\n    // Detect if scroll is going down.\n    let scrollPosition = getScrollPosition();\n    if (scrollPosition > previousScrollPosition) {\n        hideStickyFooter();\n    } else {\n        showStickyFooter();\n    }\n    previousScrollPosition = scrollPosition;\n};\n\n/**\n * Return if the sticky footer must be enabled by default or not.\n * @returns {Boolean} true if the sticky footer is enabled automatic.\n */\nconst isDisabledByDefault = () => {\n    const footer = document.querySelector(SELECTORS.STICKYFOOTER);\n    if (!footer) {\n        return false;\n    }\n    return !!footer.dataset.disable;\n};\n\n/**\n * Show the sticky footer in the page.\n */\nconst showStickyFooter = () => {\n    // We need some seconds to make sure the CSS animation is ready.\n    const pendingPromise = new Pending('theme_boost/sticky-footer:enabling');\n    const footer = document.querySelector(SELECTORS.STICKYFOOTER);\n    const page = document.querySelector(SELECTORS.PAGE);\n    if (footer && page) {\n        document.body.classList.add(CLASSES.HASSTICKYFOOTER);\n        page.classList.add(CLASSES.HASSTICKYFOOTER);\n    }\n    setTimeout(() => pendingPromise.resolve(), 1000);\n};\n\n/**\n * Hide the sticky footer in the page.\n */\nconst hideStickyFooter = () => {\n    document.body.classList.remove(CLASSES.HASSTICKYFOOTER);\n    const page = document.querySelector(SELECTORS.PAGE);\n    page?.classList.remove(CLASSES.HASSTICKYFOOTER);\n};\n\n/**\n * Enable sticky footer in the page.\n */\nexport const enableStickyFooter = () => {\n    enabled = true;\n    showStickyFooter();\n};\n\n/**\n * Disable sticky footer in the page.\n */\nexport const disableStickyFooter = () => {\n    enabled = false;\n    hideStickyFooter();\n};\n\n/**\n * Initialize the module.\n */\nexport const init = () => {\n    // Prevent sticky footer in behat.\n    if (initialized || document.body.classList.contains('behat-site')) {\n        defaultInit();\n        return;\n    }\n    initialized = true;\n    if (!isDisabledByDefault()) {\n        enableStickyFooter();\n    }\n    const content = document.querySelector(SELECTORS.PAGE) ?? document.body;\n\n    content.addEventListener(\"scroll\", scrollSpy);\n\n    registerManager({\n        enableStickyFooter,\n        disableStickyFooter,\n    });\n};\n"],"names":["SELECTORS","CLASSES","initialized","previousScrollPosition","enabled","scrollSpy","document","body","clientWidth","scrollPosition","page","querySelector","scrollTop","window","pageYOffset","getScrollPosition","hideStickyFooter","showStickyFooter","pendingPromise","Pending","footer","classList","add","setTimeout","resolve","remove","enableStickyFooter","disableStickyFooter","contains","dataset","disable","isDisabledByDefault","addEventListener"],"mappings":";;;;;;;2MA0BMA,uBACY,gBADZA,eAEI,QAGJC,wBACe,sBAGjBC,aAAc,EAEdC,uBAAyB,EAEzBC,SAAU,QAmBRC,UAAY,SACTD,kBAIDE,SAASC,KAAKC,aAAe,eAI7BC,eArBkB,YAChBC,KAAOJ,SAASK,cAAcX,uBAChCU,KACOA,KAAKE,UAETC,OAAOC,aAgBOC,GACjBN,eAAiBN,uBACjBa,mBAEAC,mBAEJd,uBAAyBM,gBAkBvBQ,iBAAmB,WAEfC,eAAiB,IAAIC,iBAAQ,sCAC7BC,OAASd,SAASK,cAAcX,wBAChCU,KAAOJ,SAASK,cAAcX,gBAChCoB,QAAUV,OACVJ,SAASC,KAAKc,UAAUC,IAAIrB,yBAC5BS,KAAKW,UAAUC,IAAIrB,0BAEvBsB,YAAW,IAAML,eAAeM,WAAW,MAMzCR,iBAAmB,KACrBV,SAASC,KAAKc,UAAUI,OAAOxB,+BACzBS,KAAOJ,SAASK,cAAcX,gBACpCU,MAAAA,MAAAA,KAAMW,UAAUI,OAAOxB,0BAMdyB,mBAAqB,KAC9BtB,SAAU,EACVa,yEAMSU,oBAAsB,KAC/BvB,SAAU,EACVY,mFAMgB,kCAEZd,aAAeI,SAASC,KAAKc,UAAUO,SAAS,kDAIpD1B,aAAc,EAzDU,YAClBkB,OAASd,SAASK,cAAcX,gCACjCoB,UAGIA,OAAOS,QAAQC,SAqDnBC,IACDL,oDAEYpB,SAASK,cAAcX,uEAAmBM,SAASC,MAE3DyB,iBAAiB,SAAU3B,6CAEnB,CACZqB,mBAAAA,mBACAC,oBAAAA"}
\ No newline at end of file
+{"version":3,"file":"sticky-footer.min.js","sources":["../src/sticky-footer.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Sticky footer module.\n *\n * @module     theme_boost/sticky-footer\n * @copyright  2022 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Pending from 'core/pending';\nimport {registerManager, init as defaultInit} from 'core/sticky-footer';\n\nconst SELECTORS = {\n    STICKYFOOTER: '.stickyfooter',\n    PAGE: '#page',\n};\n\nconst CLASSES = {\n    HASSTICKYFOOTER: 'hasstickyfooter',\n};\n\nlet initialized = false;\n\nlet previousScrollPosition = 0;\n\nlet enabled = false;\n\n/**\n * Scroll handler.\n * @package\n */\nconst scrollSpy = () => {\n    if (!enabled) {\n        return;\n    }\n    // Ignore scroll if page size is not small.\n    if (document.body.clientWidth >= 768) {\n        return;\n    }\n    // Detect if scroll is going down.\n    let scrollPosition = window.scrollY;\n    if (scrollPosition > previousScrollPosition) {\n        hideStickyFooter();\n    } else {\n        showStickyFooter();\n    }\n    previousScrollPosition = scrollPosition;\n};\n\n/**\n * Return if the sticky footer must be enabled by default or not.\n * @returns {Boolean} true if the sticky footer is enabled automatic.\n */\nconst isDisabledByDefault = () => {\n    const footer = document.querySelector(SELECTORS.STICKYFOOTER);\n    if (!footer) {\n        return false;\n    }\n    return !!footer.dataset.disable;\n};\n\n/**\n * Show the sticky footer in the page.\n */\nconst showStickyFooter = () => {\n    // We need some seconds to make sure the CSS animation is ready.\n    const pendingPromise = new Pending('theme_boost/sticky-footer:enabling');\n    const footer = document.querySelector(SELECTORS.STICKYFOOTER);\n    const page = document.querySelector(SELECTORS.PAGE);\n    if (footer && page) {\n        document.body.classList.add(CLASSES.HASSTICKYFOOTER);\n        page.classList.add(CLASSES.HASSTICKYFOOTER);\n    }\n    setTimeout(() => pendingPromise.resolve(), 1000);\n};\n\n/**\n * Hide the sticky footer in the page.\n */\nconst hideStickyFooter = () => {\n    document.body.classList.remove(CLASSES.HASSTICKYFOOTER);\n    const page = document.querySelector(SELECTORS.PAGE);\n    page?.classList.remove(CLASSES.HASSTICKYFOOTER);\n};\n\n/**\n * Enable sticky footer in the page.\n */\nexport const enableStickyFooter = () => {\n    enabled = true;\n    showStickyFooter();\n};\n\n/**\n * Disable sticky footer in the page.\n */\nexport const disableStickyFooter = () => {\n    enabled = false;\n    hideStickyFooter();\n};\n\n/**\n * Initialize the module.\n */\nexport const init = () => {\n    // Prevent sticky footer in behat.\n    if (initialized || document.body.classList.contains('behat-site')) {\n        defaultInit();\n        return;\n    }\n    initialized = true;\n    if (!isDisabledByDefault()) {\n        enableStickyFooter();\n    }\n\n    document.addEventListener(\"scroll\", scrollSpy);\n\n    registerManager({\n        enableStickyFooter,\n        disableStickyFooter,\n    });\n};\n"],"names":["SELECTORS","CLASSES","initialized","previousScrollPosition","enabled","scrollSpy","document","body","clientWidth","scrollPosition","window","scrollY","hideStickyFooter","showStickyFooter","pendingPromise","Pending","footer","querySelector","page","classList","add","setTimeout","resolve","remove","enableStickyFooter","disableStickyFooter","contains","dataset","disable","isDisabledByDefault","addEventListener"],"mappings":";;;;;;;2MA0BMA,uBACY,gBADZA,eAEI,QAGJC,wBACe,sBAGjBC,aAAc,EAEdC,uBAAyB,EAEzBC,SAAU,QAMRC,UAAY,SACTD,kBAIDE,SAASC,KAAKC,aAAe,eAI7BC,eAAiBC,OAAOC,QACxBF,eAAiBN,uBACjBS,mBAEAC,mBAEJV,uBAAyBM,gBAkBvBI,iBAAmB,WAEfC,eAAiB,IAAIC,iBAAQ,sCAC7BC,OAASV,SAASW,cAAcjB,wBAChCkB,KAAOZ,SAASW,cAAcjB,gBAChCgB,QAAUE,OACVZ,SAASC,KAAKY,UAAUC,IAAInB,yBAC5BiB,KAAKC,UAAUC,IAAInB,0BAEvBoB,YAAW,IAAMP,eAAeQ,WAAW,MAMzCV,iBAAmB,KACrBN,SAASC,KAAKY,UAAUI,OAAOtB,+BACzBiB,KAAOZ,SAASW,cAAcjB,gBACpCkB,MAAAA,MAAAA,KAAMC,UAAUI,OAAOtB,0BAMduB,mBAAqB,KAC9BpB,SAAU,EACVS,yEAMSY,oBAAsB,KAC/BrB,SAAU,EACVQ,mFAMgB,KAEZV,aAAeI,SAASC,KAAKY,UAAUO,SAAS,wCAIpDxB,aAAc,EAzDU,YAClBc,OAASV,SAASW,cAAcjB,gCACjCgB,UAGIA,OAAOW,QAAQC,SAqDnBC,IACDL,qBAGJlB,SAASwB,iBAAiB,SAAUzB,6CAEpB,CACZmB,mBAAAA,mBACAC,oBAAAA"}
\ No newline at end of file
diff --git a/theme/boost/amd/src/drawers.js b/theme/boost/amd/src/drawers.js
index 23ba7903546..d81429dab28 100644
--- a/theme/boost/amd/src/drawers.js
+++ b/theme/boost/amd/src/drawers.js
@@ -40,15 +40,35 @@ const SELECTORS = {
     OPENBTN: '[data-toggler="drawers"][data-action="opendrawer"]',
     TOGGLEBTN: '[data-toggler="drawers"][data-action="toggle"]',
     DRAWERS: '[data-region="fixed-drawer"]',
-    CONTAINER: '#page.drawers',
     DRAWERCONTENT: '.drawercontent',
+    PAGECONTENT: '#page-content',
 };
 
 const CLASSES = {
     SCROLLED: 'scrolled',
     SHOW: 'show',
     NOTINITIALISED: 'not-initialized',
-    TOGGLERIGHT: '.drawer-right-toggle',
+};
+
+/**
+ * Pixel thresshold to auto-hide drawers.
+ *
+ * @type {Number}
+ */
+const THRESHOLD = 20;
+
+/**
+ * Try to get the drawer z-index from the page content.
+ *
+ * @returns {Number|null} the z-index of the drawer.
+ * @private
+ */
+const getDrawerZIndex = () => {
+    const drawer = document.querySelector(SELECTORS.DRAWERS);
+    if (!drawer) {
+        return null;
+    }
+    return parseInt(window.getComputedStyle(drawer).zIndex, 10);
 };
 
 /**
@@ -62,6 +82,10 @@ const getBackdrop = () => {
         backdropPromise = Templates.render('core/modal_backdrop', {})
         .then(html => new ModalBackdrop(html))
         .then(modalBackdrop => {
+            const drawerZindex = getDrawerZIndex();
+            if (drawerZindex) {
+                modalBackdrop.setZIndex(getDrawerZIndex() - 1);
+            }
             modalBackdrop.getAttachmentPoint().get(0).addEventListener('click', e => {
                 e.preventDefault();
                 Drawers.closeAllDrawers();
@@ -239,6 +263,12 @@ export default class Drawers {
      */
     drawerNode = null;
 
+    /**
+     * The drawer page bounding box dimensions.
+     * @var {DOMRect} boundingRect
+     */
+    boundingRect = null;
+
     constructor(drawerNode) {
         // Some behat tests may use fake drawer divs to test components in drawers.
         if (drawerNode.dataset.behatFakeDrawer !== undefined) {
@@ -415,6 +445,8 @@ export default class Drawers {
             page.classList.add(state);
         }
 
+        this.boundingRect = this.drawerNode.getBoundingClientRect();
+
         if (isSmall()) {
             getBackdrop().then(backdrop => {
                 backdrop.show();
@@ -486,7 +518,7 @@ export default class Drawers {
 
             if (isSmall()) {
                 const pageWrapper = document.getElementById('page');
-                pageWrapper.style.overflow = 'auto';
+                pageWrapper.style.overflow = 'visible';
             }
             return backdrop;
         })
@@ -518,6 +550,65 @@ export default class Drawers {
         }
     }
 
+    /**
+     * Displaces the drawer outsite the page.
+     *
+     * @param {Number} scrollPosition the page current scroll position
+     */
+    displace(scrollPosition) {
+        let displace = scrollPosition;
+        let openButton = getDrawerOpenButton(this.drawerNode.id);
+        if (scrollPosition === 0) {
+            this.drawerNode.style.transform = '';
+            if (openButton) {
+                openButton.style.transform = '';
+            }
+            return;
+        }
+        const state = this.drawerNode.dataset?.state;
+        const drawrWidth = this.drawerNode.offsetWidth;
+        let scrollThreshold = drawrWidth;
+        let direction = -1;
+        if (state === 'show-drawer-right') {
+            direction = 1;
+            scrollThreshold = THRESHOLD;
+        }
+        if (scrollPosition > scrollThreshold) {
+            displace = drawrWidth + THRESHOLD;
+        }
+        displace *= direction;
+        const transform = `translateX(${displace}px)`;
+        if (openButton) {
+            openButton.style.transform = transform;
+        }
+        this.drawerNode.style.transform = transform;
+    }
+
+    /**
+     * Prevent drawer from overlapping an element.
+     *
+     * @param {HTMLElement} currentFocus
+     */
+    preventOverlap(currentFocus) {
+        if (!this.isOpen) {
+            return;
+        }
+        const drawrWidth = this.drawerNode.offsetWidth;
+        const element = currentFocus.getBoundingClientRect();
+        const drawer = this.boundingRect;
+        const overlapping = (
+            (element.right + THRESHOLD) > drawer.left &&
+            (element.left - THRESHOLD) < drawer.right
+        );
+        if (overlapping) {
+            // Force drawer to displace out of the page.
+            this.displace(drawrWidth + 1);
+        } else {
+            // Reset drawer displacement.
+            this.displace(window.scrollX);
+        }
+    }
+
     /**
      * Close all drawers.
      */
@@ -541,41 +632,34 @@ export default class Drawers {
             drawerInstance.closeDrawer();
         });
     }
-}
 
-/**
- * Activate the scroller helper for the drawer layout.
- *
- * @private
- */
-const scroller = () => {
-    const body = document.querySelector('body');
-    const drawerLayout = document.querySelector(SELECTORS.CONTAINER);
-    if (drawerLayout) {
-        // If there is not visible scrollbar then remove extra margin from right drawer.
-        const drawerRight = document.querySelector(SELECTORS.CONTAINER + ' ' + CLASSES.TOGGLERIGHT);
-        if (!scrollbarVisible(drawerLayout) && drawerRight) {
-            drawerRight.style.marginRight = '0';
+    /**
+     * Prevent drawers from covering the focused element.
+     */
+    static preventCoveringFocusedElement() {
+        const currentFocus = document.activeElement;
+        // Focus on page layout elements should be ignored.
+        const pagecontent = document.querySelector(SELECTORS.PAGECONTENT);
+        if (!currentFocus || !pagecontent?.contains(currentFocus)) {
+            Drawers.displaceDrawers(window.scrollX);
+            return;
         }
-        drawerLayout.addEventListener("scroll", () => {
-            if (drawerLayout.scrollTop >= window.innerHeight) {
-                body.classList.add(CLASSES.SCROLLED);
-            } else {
-                body.classList.remove(CLASSES.SCROLLED);
-            }
+        drawerMap.forEach(drawerInstance => {
+            drawerInstance.preventOverlap(currentFocus);
         });
     }
-};
 
-/**
- * Check if there is a visible scrollbar in the given html element.
- *
- * @param {object} htmlNode The html element.
- * @returns {boolean} true if the scroll height is greater than client height.
- */
-const scrollbarVisible = (htmlNode) => {
-   return htmlNode.scrollHeight > htmlNode.clientHeight;
-};
+    /**
+     * Prevent drawer from covering the content when the page content covers the full page.
+     *
+     * @param {Number} displace
+     */
+    static displaceDrawers(displace) {
+        drawerMap.forEach(drawerInstance => {
+            drawerInstance.displace(displace);
+        });
+    }
+}
 
 /**
  * Set the last used attribute for the last used toggle button for a drawer.
@@ -684,10 +768,25 @@ const registerListeners = () => {
         }
     };
 
+    document.addEventListener('scroll', () => {
+        const body = document.querySelector('body');
+        if (window.scrollY >= window.innerHeight) {
+            body.classList.add(CLASSES.SCROLLED);
+        } else {
+            body.classList.remove(CLASSES.SCROLLED);
+        }
+        // Horizontal scroll listener to displace the drawers to prevent covering
+        // any possible sticky content.
+        Drawers.displaceDrawers(window.scrollX);
+    });
+
+    const preventOverlap = debounce(Drawers.preventCoveringFocusedElement, 100);
+    document.addEventListener('focusin', preventOverlap);
+    document.addEventListener('focusout', preventOverlap);
+
     window.addEventListener('resize', debounce(closeOnResizeListener, 400));
 };
 
-scroller();
 registerListeners();
 
 const drawers = document.querySelectorAll(SELECTORS.DRAWERS);
diff --git a/theme/boost/amd/src/footer-popover.js b/theme/boost/amd/src/footer-popover.js
index 1d2858a44df..fb703293b8d 100644
--- a/theme/boost/amd/src/footer-popover.js
+++ b/theme/boost/amd/src/footer-popover.js
@@ -43,7 +43,23 @@ export const init = () => {
         html: true,
         placement: 'top',
         customClass: 'footer',
-        trigger: 'click'
+        trigger: 'click',
+        boundary: 'viewport',
+        popperConfig: {
+            modifiers: {
+                preventOverflow: {
+                    boundariesElement: 'viewport',
+                    padding: 48
+                },
+                offset: {},
+                flip: {
+                    behavior: 'flip'
+                },
+                arrow: {
+                    element: '.arrow'
+                },
+            }
+        }
     });
 
     document.addEventListener('click', e => {
diff --git a/theme/boost/amd/src/sticky-footer.js b/theme/boost/amd/src/sticky-footer.js
index aea3be33155..e7fc5476f69 100644
--- a/theme/boost/amd/src/sticky-footer.js
+++ b/theme/boost/amd/src/sticky-footer.js
@@ -39,19 +39,6 @@ let previousScrollPosition = 0;
 
 let enabled = false;
 
-/**
- * Return the current page scroll position.
- * @package
- * @returns {number} the current scroll position
- */
-const getScrollPosition = () => {
-    const page = document.querySelector(SELECTORS.PAGE);
-    if (page) {
-        return page.scrollTop;
-    }
-    return window.pageYOffset;
-};
-
 /**
  * Scroll handler.
  * @package
@@ -65,7 +52,7 @@ const scrollSpy = () => {
         return;
     }
     // Detect if scroll is going down.
-    let scrollPosition = getScrollPosition();
+    let scrollPosition = window.scrollY;
     if (scrollPosition > previousScrollPosition) {
         hideStickyFooter();
     } else {
@@ -139,9 +126,8 @@ export const init = () => {
     if (!isDisabledByDefault()) {
         enableStickyFooter();
     }
-    const content = document.querySelector(SELECTORS.PAGE) ?? document.body;
 
-    content.addEventListener("scroll", scrollSpy);
+    document.addEventListener("scroll", scrollSpy);
 
     registerManager({
         enableStickyFooter,
diff --git a/theme/boost/layout/drawers.php b/theme/boost/layout/drawers.php
index bd8b502d43c..d442c4d0736 100644
--- a/theme/boost/layout/drawers.php
+++ b/theme/boost/layout/drawers.php
@@ -41,7 +41,7 @@ if (isloggedin()) {
     $blockdraweropen = false;
 }
 
-if (defined('BEHAT_SITE_RUNNING')) {
+if (defined('BEHAT_SITE_RUNNING') && get_user_preferences('behat_keep_drawer_closed') != 1) {
     $blockdraweropen = true;
 }
 
diff --git a/theme/boost/scss/moodle/drawer.scss b/theme/boost/scss/moodle/drawer.scss
index a8cc7020975..cc1606bda7b 100644
--- a/theme/boost/scss/moodle/drawer.scss
+++ b/theme/boost/scss/moodle/drawer.scss
@@ -159,9 +159,8 @@ $right-drawer-width: 320px;
 }
 
 @mixin drawer() {
-    @include transition(left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease);
     background-color: $drawer-bg-color;
-    z-index: $zindex-modal;
+    z-index: $zindex-fixed;
     position: fixed;
     height: 100vh;
     top: 0;
@@ -173,6 +172,7 @@ $right-drawer-width: 320px;
 
 @mixin drawertypes() {
     &.drawer-right {
+        @include transition(right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease);
         width: $drawer-right-width;
         max-width: $drawer-right-width;
         right: calc(-#{$drawer-right-width} + -10px);
@@ -190,6 +190,7 @@ $right-drawer-width: 320px;
         }
     }
     &.drawer-left {
+        @include transition(left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease);
         width: $drawer-left-width;
         max-width: $drawer-left-width;
         left: calc(-#{$drawer-left-width} + -10px);
@@ -221,15 +222,15 @@ $right-drawer-width: 320px;
 
 @include media-breakpoint-up(lg) {
     .drawer {
-        z-index: inherit;
-
+        // Make sure that in large screens the drawer goes under the drop down menus.
+        z-index: $zindex-dropdown - 1;
         // Workaround to display the skip link elements from the blocks drawer infront of the navbar.
+        // As the skip link is in a fixed position and z-index for this element is ignored
+        // then it is hidden behind the top navbar.
+        // The workaround is to actually give a z-index to the drawer so it appears in front of the
+        // navbar (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
         &#theme_boost-drawers-blocks:focus-within {
-            position: absolute;
-
-            .drawercontent {
-                z-index: auto;
-            }
+            z-index: $zindex-fixed + 1;
         }
 
         &.not-initialized {
diff --git a/theme/boost/scss/moodle/grade.scss b/theme/boost/scss/moodle/grade.scss
index 7ce968b2706..582945b5c93 100644
--- a/theme/boost/scss/moodle/grade.scss
+++ b/theme/boost/scss/moodle/grade.scss
@@ -526,7 +526,7 @@
 
         tr.heading {
             position: sticky;
-            top: 0;
+            top: $navbar-height;
             z-index: 4;
         }
 
diff --git a/theme/boost/scss/moodle/layout.scss b/theme/boost/scss/moodle/layout.scss
index 41c2933c73e..13435722a4c 100644
--- a/theme/boost/scss/moodle/layout.scss
+++ b/theme/boost/scss/moodle/layout.scss
@@ -181,9 +181,6 @@
     #page.drawers .main-inner {
         margin-top: 1.5rem;
     }
-    #page.drawers .drawer-right-toggle {
-        margin-right: 0.7rem;
-    }
 }
 
 @include media-breakpoint-up(md) {
@@ -218,9 +215,8 @@
 
     #page.drawers {
         position: relative;
-        overflow-y: auto;
+        overflow-y: visible;
         @include transition(0.2s);
-        height: calc(100vh - #{$navbar-height});
         left: 0;
         right: 0;
         &.show-drawer-left {
@@ -241,7 +237,7 @@
             margin-right: $drawer-right-width;
         }
         &.hasstickyfooter {
-            height: calc(100vh - #{$navbar-height} - #{$stickyfooter-height});
+            margin-bottom: $stickyfooter-height;
         }
     }
 }
diff --git a/theme/boost/scss/moodle/sticky-footer.scss b/theme/boost/scss/moodle/sticky-footer.scss
index 30e887516ff..348b0a5fbac 100644
--- a/theme/boost/scss/moodle/sticky-footer.scss
+++ b/theme/boost/scss/moodle/sticky-footer.scss
@@ -14,7 +14,7 @@ body {
     height: $stickyfooter-height;
     bottom: calc(#{$stickyfooter-height} * -1);
     transition: bottom .5s;
-    z-index: $zindex-dropdown;
+    z-index: $zindex-fixed;
     overflow: hidden;
     box-shadow: 0 0 1rem rgba($black, .15);
     font-size: calc(#{$font-size-base} * 1.10);
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 48c7d2895e4..e6493fc9f1c 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -29724,27 +29724,27 @@ body.drawer-ease {
 }
 
 .drawer {
-  transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
   background-color: #f8f9fa;
-  z-index: 1050;
+  z-index: 1030;
   position: fixed;
   height: 100vh;
   top: 0;
 }
-@media (prefers-reduced-motion: reduce) {
-  .drawer {
-    transition: none;
-  }
-}
 .drawer.not-initialized {
   display: none;
 }
 .drawer.drawer-right {
+  transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
   width: 315px;
   max-width: 315px;
   right: calc(-315px + -10px);
   visibility: hidden;
 }
+@media (prefers-reduced-motion: reduce) {
+  .drawer.drawer-right {
+    transition: none;
+  }
+}
 .drawer.drawer-right.show {
   right: 0;
   visibility: visible;
@@ -29754,11 +29754,17 @@ body.drawer-ease {
   margin-right: 5px;
 }
 .drawer.drawer-left {
+  transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
   width: 285px;
   max-width: 285px;
   left: calc(-285px + -10px);
   visibility: hidden;
 }
+@media (prefers-reduced-motion: reduce) {
+  .drawer.drawer-left {
+    transition: none;
+  }
+}
 .drawer.drawer-left.show {
   left: 0;
   visibility: visible;
@@ -29776,13 +29782,10 @@ body.drawer-ease {
 
 @media (min-width: 992px) {
   .drawer {
-    z-index: inherit;
+    z-index: 999;
   }
   .drawer#theme_boost-drawers-blocks:focus-within {
-    position: absolute;
-  }
-  .drawer#theme_boost-drawers-blocks:focus-within .drawercontent {
-    z-index: auto;
+    z-index: 1031;
   }
   .drawer.not-initialized {
     display: block;
@@ -29807,35 +29810,35 @@ body.drawer-ease {
 @media (max-width: 991.98px) {
   .drawer-md {
     display: block;
-    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
     background-color: #f8f9fa;
-    z-index: 1050;
+    z-index: 1030;
     position: fixed;
     height: 100vh;
     top: 0;
   }
-}
-@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
-  .drawer-md {
-    transition: none;
-  }
-}
-@media (max-width: 991.98px) {
   .drawer-md.not-initialized {
     display: none;
   }
-}
-@media (max-width: 991.98px) {
   .drawer-md.drawer-right {
+    transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
     width: 315px;
     max-width: 315px;
     right: calc(-315px + -10px);
     visibility: hidden;
   }
+}
+@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+  .drawer-md.drawer-right {
+    transition: none;
+  }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-right.show {
     right: 0;
     visibility: visible;
   }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-right .drawertoggle {
     margin-left: auto;
     margin-right: 5px;
@@ -29843,15 +29846,25 @@ body.drawer-ease {
 }
 @media (max-width: 991.98px) {
   .drawer-md.drawer-left {
+    transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
     width: 285px;
     max-width: 285px;
     left: calc(-285px + -10px);
     visibility: hidden;
   }
+}
+@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+  .drawer-md.drawer-left {
+    transition: none;
+  }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-left.show {
     left: 0;
     visibility: visible;
   }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-left .drawertoggle {
     margin-right: auto;
     margin-left: 5px;
@@ -29868,35 +29881,35 @@ body.drawer-ease {
 @media (max-width: 767.98px) {
   .drawer-sm {
     display: block;
-    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
     background-color: #f8f9fa;
-    z-index: 1050;
+    z-index: 1030;
     position: fixed;
     height: 100vh;
     top: 0;
   }
-}
-@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
-  .drawer-sm {
-    transition: none;
-  }
-}
-@media (max-width: 767.98px) {
   .drawer-sm.not-initialized {
     display: none;
   }
-}
-@media (max-width: 767.98px) {
   .drawer-sm.drawer-right {
+    transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
     width: 315px;
     max-width: 315px;
     right: calc(-315px + -10px);
     visibility: hidden;
   }
+}
+@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+  .drawer-sm.drawer-right {
+    transition: none;
+  }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-right.show {
     right: 0;
     visibility: visible;
   }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-right .drawertoggle {
     margin-left: auto;
     margin-right: 5px;
@@ -29904,15 +29917,25 @@ body.drawer-ease {
 }
 @media (max-width: 767.98px) {
   .drawer-sm.drawer-left {
+    transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
     width: 285px;
     max-width: 285px;
     left: calc(-285px + -10px);
     visibility: hidden;
   }
+}
+@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+  .drawer-sm.drawer-left {
+    transition: none;
+  }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-left.show {
     left: 0;
     visibility: visible;
   }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-left .drawertoggle {
     margin-right: auto;
     margin-left: 5px;
@@ -35364,7 +35387,7 @@ p.arrow_button {
 }
 .path-grade-report-grader .gradeparent tr.heading {
   position: sticky;
-  top: 0;
+  top: 60px;
   z-index: 4;
 }
 .path-grade-report-grader .gradeparent tr.userrow th {
@@ -35848,7 +35871,7 @@ body {
   height: max(96px, 0.9375rem * 3);
   bottom: calc(max(96px, 0.9375rem * 3) * -1);
   transition: bottom 0.5s;
-  z-index: 1000;
+  z-index: 1030;
   overflow: hidden;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
   font-size: calc(0.9375rem * 1.10);
@@ -36592,9 +36615,6 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   #page.drawers .main-inner {
     margin-top: 1.5rem;
   }
-  #page.drawers .drawer-right-toggle {
-    margin-right: 0.7rem;
-  }
 }
 @media (min-width: 768px) {
   #page.drawers {
@@ -36622,9 +36642,8 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   }
   #page.drawers {
     position: relative;
-    overflow-y: auto;
+    overflow-y: visible;
     transition: 0.2s;
-    height: calc(100vh - 60px);
     left: 0;
     right: 0;
   }
@@ -36659,7 +36678,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
 }
 @media (min-width: 992px) {
   #page.drawers.hasstickyfooter {
-    height: calc(100vh - 60px - max(96px, 0.9375rem * 3));
+    margin-bottom: max(96px, 0.9375rem * 3);
   }
 }
 .drawercontrolbuttons {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 505bea9a17d..b3ba1cc90e9 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -29724,27 +29724,27 @@ body.drawer-ease {
 }
 
 .drawer {
-  transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
   background-color: #f8f9fa;
-  z-index: 1050;
+  z-index: 1030;
   position: fixed;
   height: 100vh;
   top: 0;
 }
-@media (prefers-reduced-motion: reduce) {
-  .drawer {
-    transition: none;
-  }
-}
 .drawer.not-initialized {
   display: none;
 }
 .drawer.drawer-right {
+  transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
   width: 315px;
   max-width: 315px;
   right: calc(-315px + -10px);
   visibility: hidden;
 }
+@media (prefers-reduced-motion: reduce) {
+  .drawer.drawer-right {
+    transition: none;
+  }
+}
 .drawer.drawer-right.show {
   right: 0;
   visibility: visible;
@@ -29754,11 +29754,17 @@ body.drawer-ease {
   margin-right: 5px;
 }
 .drawer.drawer-left {
+  transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
   width: 285px;
   max-width: 285px;
   left: calc(-285px + -10px);
   visibility: hidden;
 }
+@media (prefers-reduced-motion: reduce) {
+  .drawer.drawer-left {
+    transition: none;
+  }
+}
 .drawer.drawer-left.show {
   left: 0;
   visibility: visible;
@@ -29776,13 +29782,10 @@ body.drawer-ease {
 
 @media (min-width: 992px) {
   .drawer {
-    z-index: inherit;
+    z-index: 999;
   }
   .drawer#theme_boost-drawers-blocks:focus-within {
-    position: absolute;
-  }
-  .drawer#theme_boost-drawers-blocks:focus-within .drawercontent {
-    z-index: auto;
+    z-index: 1031;
   }
   .drawer.not-initialized {
     display: block;
@@ -29807,35 +29810,35 @@ body.drawer-ease {
 @media (max-width: 991.98px) {
   .drawer-md {
     display: block;
-    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
     background-color: #f8f9fa;
-    z-index: 1050;
+    z-index: 1030;
     position: fixed;
     height: 100vh;
     top: 0;
   }
-}
-@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
-  .drawer-md {
-    transition: none;
-  }
-}
-@media (max-width: 991.98px) {
   .drawer-md.not-initialized {
     display: none;
   }
-}
-@media (max-width: 991.98px) {
   .drawer-md.drawer-right {
+    transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
     width: 315px;
     max-width: 315px;
     right: calc(-315px + -10px);
     visibility: hidden;
   }
+}
+@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+  .drawer-md.drawer-right {
+    transition: none;
+  }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-right.show {
     right: 0;
     visibility: visible;
   }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-right .drawertoggle {
     margin-left: auto;
     margin-right: 5px;
@@ -29843,15 +29846,25 @@ body.drawer-ease {
 }
 @media (max-width: 991.98px) {
   .drawer-md.drawer-left {
+    transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
     width: 285px;
     max-width: 285px;
     left: calc(-285px + -10px);
     visibility: hidden;
   }
+}
+@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+  .drawer-md.drawer-left {
+    transition: none;
+  }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-left.show {
     left: 0;
     visibility: visible;
   }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-left .drawertoggle {
     margin-right: auto;
     margin-left: 5px;
@@ -29868,35 +29881,35 @@ body.drawer-ease {
 @media (max-width: 767.98px) {
   .drawer-sm {
     display: block;
-    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
     background-color: #f8f9fa;
-    z-index: 1050;
+    z-index: 1030;
     position: fixed;
     height: 100vh;
     top: 0;
   }
-}
-@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
-  .drawer-sm {
-    transition: none;
-  }
-}
-@media (max-width: 767.98px) {
   .drawer-sm.not-initialized {
     display: none;
   }
-}
-@media (max-width: 767.98px) {
   .drawer-sm.drawer-right {
+    transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
     width: 315px;
     max-width: 315px;
     right: calc(-315px + -10px);
     visibility: hidden;
   }
+}
+@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+  .drawer-sm.drawer-right {
+    transition: none;
+  }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-right.show {
     right: 0;
     visibility: visible;
   }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-right .drawertoggle {
     margin-left: auto;
     margin-right: 5px;
@@ -29904,15 +29917,25 @@ body.drawer-ease {
 }
 @media (max-width: 767.98px) {
   .drawer-sm.drawer-left {
+    transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease;
     width: 285px;
     max-width: 285px;
     left: calc(-285px + -10px);
     visibility: hidden;
   }
+}
+@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+  .drawer-sm.drawer-left {
+    transition: none;
+  }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-left.show {
     left: 0;
     visibility: visible;
   }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-left .drawertoggle {
     margin-right: auto;
     margin-left: 5px;
@@ -35364,7 +35387,7 @@ p.arrow_button {
 }
 .path-grade-report-grader .gradeparent tr.heading {
   position: sticky;
-  top: 0;
+  top: 50px;
   z-index: 4;
 }
 .path-grade-report-grader .gradeparent tr.userrow th {
@@ -35782,7 +35805,7 @@ body {
   height: max(96px, 0.9375rem * 3);
   bottom: calc(max(96px, 0.9375rem * 3) * -1);
   transition: bottom 0.5s;
-  z-index: 1000;
+  z-index: 1030;
   overflow: hidden;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
   font-size: calc(0.9375rem * 1.10);
@@ -36526,9 +36549,6 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   #page.drawers .main-inner {
     margin-top: 1.5rem;
   }
-  #page.drawers .drawer-right-toggle {
-    margin-right: 0.7rem;
-  }
 }
 @media (min-width: 768px) {
   #page.drawers {
@@ -36556,9 +36576,8 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   }
   #page.drawers {
     position: relative;
-    overflow-y: auto;
+    overflow-y: visible;
     transition: 0.2s;
-    height: calc(100vh - 50px);
     left: 0;
     right: 0;
   }
@@ -36593,7 +36612,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
 }
 @media (min-width: 992px) {
   #page.drawers.hasstickyfooter {
-    height: calc(100vh - 50px - max(96px, 0.9375rem * 3));
+    margin-bottom: max(96px, 0.9375rem * 3);
   }
 }
 .drawercontrolbuttons {