first commit

lib/templates/local/action_menu/subpanel.mustache

@@ -0,0 +1,68 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/action_menu/subpanel
+    Action menu link.
+    Example context (json):
+    {
+        "id": "exampleId12345678",
+        "text": "Example link text",
+        "subpanelcontent": "Example subpanel content",
+        "url": "http://example.com",
+        "attributes": [
+            {
+                "name": "data-attribute",
+                "value": "example"
+            }
+        ],
+        "itemicon": {
+            "key": "t/groups",
+            "component": "core",
+            "title": "Example icon title"
+        },
+        "instance": 1,
+        "disabled": false
+    }
+}}
+<div
+    class="dropdown-subpanel position-relative dropright"
+    id="{{id}}"
+>
+    <a
+        class="dropdown-item dropdown-toggle {{#disabled}} disabled {{/disabled}}"
+        href="{{url}}"
+        data-toggle="dropdown-subpanel"
+        role="menuitem"
+        aria-haspopup="true"
+        tabindex="-1"
+        aria-expanded="false"
+        aria-label="{{text}}"
+        {{#attributes}}
+            {{name}}="{{value}}"
+        {{/attributes}}
+    >
+        {{#itemicon}}
+            {{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}
+        {{/itemicon}}
+        <span class="menu-action-text" id="actionmenuactionsubpanel-{{instance}}">{{{text}}}</span>
+    </a>
+    <div class="dropdown-menu dropdown-subpanel-content" role="menu">
+        {{{subpanelcontent}}}
+    </div>
+</div>
+{{#js}}
+    require(['core/local/action_menu/subpanel'], function(Module) {
+        Module.init('#' + '{{id}}');
+    });
+{{/js}}

lib/templates/local/choicelist.mustache

@@ -0,0 +1,85 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/choicelist
+
+    Default template for a choicelist object.
+
+    Classes required for JS:
+    * none
+
+    Context variables required for this template:
+    * buttoncontent String - the dropdown trigger button content.
+    * choices Array - the status options.
+
+    Example context (json):
+    {
+        "hasoptions": true,
+        "dialogcontent": "Dialog content",
+        "options": [
+            {
+                "optionid": "option1",
+                "value": "value1",
+                "name": "First option",
+                "description": "First option description",
+                "hasicon": false,
+                "first": true,
+                "optionnumber": 1,
+                "optionuniqid": "option1uniqid",
+                "selected": true
+            },
+            {
+                "optionid": "option2",
+                "value": "value2",
+                "name": "Second option",
+                "description": "Second option description",
+                "icon": {
+                    "extraclasses": "iconhelp",
+                    "attributes": [
+                        {"name": "src", "value": "../../../pix/help.svg"},
+                        {"name": "alt", "value": "Help icon"}
+                    ]
+                },
+                "hasicon": true,
+                "optionnumber": 2,
+                "optionuniqid": "option2uniqid"
+            },
+            {
+                "optionid": "option3",
+                "value": "value3",
+                "name": "Third option",
+                "description": "Third option description",
+                "icon": {
+                    "extraclasses": "iconhelp",
+                    "attributes": [
+                        {"name": "src", "value": "../../../pix/help.svg"},
+                        {"name": "alt", "value": "Help icon"}
+                    ]
+                },
+                "hasicon": true,
+                "disabled": true,
+                "optionnumber": 3,
+                "optionuniqid": "option3uniqid"
+            }
+        ]
+    }
+}}
+<div class="d-flex flex-column choicelist p-1" role="listbox">
+    {{#options}}
+        {{> core/local/choicelist/option}}
+    {{/options}}
+</div>

lib/templates/local/choicelist/option.mustache

@@ -0,0 +1,101 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/choicelist/option
+
+    Default template for a choicelist option.
+
+    Any mustache can user this template to render options in a custom choicelist wrapper.
+
+    Classes required for JS:
+    * none
+
+    Context variables required for this template:
+    * optionuniqid String - unique option id.
+    * value String - option value.
+    * name String - options name.
+    * optionnumber Number - option number.
+
+    Example context (json):
+    {
+        "value": "value2",
+        "name": "Second option",
+        "description": "Second option description",
+        "icon": {
+            "extraclasses": "iconhelp",
+            "attributes": [
+                {"name": "src", "value": "../../../pix/help.svg"},
+                {"name": "alt", "value": "Help icon"}
+            ]
+        },
+        "hasicon": true,
+        "optionnumber": 2,
+        "optionuniqid": "option2uniqid",
+        "selected": true
+    }
+}}
+<div
+    class="d-flex flex-row align-items-start p-2 mb-1 {{!
+        }} position-relative rounded dropdown-item-outline {{!
+        }} {{#disabled}} dimmed_text {{/disabled}} {{!
+        }} {{#selected}} border bg-primary-light selected {{/selected}}"
+    data-optionnumber="{{optionnumber}}"
+    data-selected="{{selected}}"
+    data-selected-classes = "border bg-primary-light selected"
+>
+    <div class="option-select-indicator">
+        <span class="{{^selected}} d-none {{/selected}}" data-for="checkedIcon">
+            {{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
+        </span>
+        <span class="{{#selected}} d-none {{/selected}}" data-for="uncheckedIcon">
+            {{#pix}} i/uncheckedcircle{{/pix}}
+        </span>
+    </div>
+    {{#icon}}
+    <div class="option-icon">
+        {{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}
+    </div>
+    {{/icon}}
+    <div class="option-name">
+        <a
+            class="stretched-link text-wrap font-weight-bold {{!
+                }} {{^disabled}} text-dark {{/disabled}} {{!
+                }} {{#disabled}} disabled {{/disabled}} {{!
+                }} {{#selected}} selected {{/selected}}"
+            role="option"
+            {{#selected}} aria-selected="true" {{/selected}}
+            {{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
+            data-value="{{value}}"
+            {{#hasurl}} href="{{{url}}}" {{/hasurl}}
+            {{! If there is no url, supose JS will handle it somehow. }}
+            {{^hasurl}} href="#" {{/hasurl}}
+            {{#disabled}} tabindex="-1" {{/disabled}}
+            {{#extras}}
+                {{attribute}}="{{value}}"
+            {{/extras}}
+        >
+            {{name}}
+        </a>
+        {{#description}}
+        <div
+            id="{{optionuniqid}}"
+            class="option-description small text-muted text-wrap">
+            {{{description}}}
+        </div>
+        {{/description}}
+    </div>
+</div>

lib/templates/local/comboboxsearch/resultitem.mustache

@@ -0,0 +1,48 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/comboboxsearch/resultitem
+
+    Template for the individual result item.
+
+    Context variables required for this template:
+    * id - Result item system ID.
+    * instance - The instance ID of the combo box.
+    * name - Result item human readable name.
+
+    The shorttext pragma can be used to provide a short text for the result item.
+    This is especially useful when the result item content contains html tags.
+
+    Example context (json):
+    {
+        "id": 2,
+        "instance": 25,
+        "name": "Foo bar"
+    }
+}}
+<li
+    id="result-{{instance}}-{{id}}"
+    class="w-100 dropdown-item d-flex px-0 align-items-center"
+    role="option"
+    {{! aria.js would use the data-short-text attribute if it is provided. }}
+    data-short-text="{{$shorttext}}{{/shorttext}}"
+    data-value="{{id}}"
+    aria-label="{{$arialabel}}{{name}}{{/arialabel}}"
+>
+    {{$content}}
+        <span class="d-block w-100 px-2 text-truncate">
+            {{name}}
+        </span>
+    {{/content}}
+</li>

lib/templates/local/comboboxsearch/resultset.mustache

@@ -0,0 +1,61 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/comboboxsearch/resultset
+
+    Wrapping template for returned result items.
+
+    Context variables required for this template:
+    * instance - The instance ID of the combo box.
+    * results - Our returned results to render.
+    * searchterm - The entered text to find these results.
+    * hasresult - Allow the handling where no results exist for the returned search term.
+
+    Example context (json):
+    {
+        "instance": 25,
+        "results": [
+            {
+                "id": 2,
+                "name": "Foo bar"
+            },
+            {
+                "id": 3,
+                "name": "Bar Foo"
+            }
+        ],
+        "searchterm": "Foo",
+        "hasresults": true
+    }
+}}
+<div class="d-flex flex-column mh-100 h-100">
+    <ul
+        id="{{$listid}}list{{/listid}}-{{instance}}-result-listbox"
+        class="searchresultitemscontainer d-flex flex-column mw-100 position-relative py-2 list-group h-100 mx-0 {{$listclasses}}{{/listclasses}}"
+        role="listbox"
+        data-region="search-result-items-container"
+    >
+        {{#hasresults}}
+            {{$results}}
+                {{#results}}
+                    {{>core/local/comboboxsearch/resultitem}}
+                {{/results}}
+            {{/results}}
+            {{$selectall}}{{/selectall}}
+        {{/hasresults}}
+    </ul>
+    {{^hasresults}}
+        <span class="small d-block px-4 mt-2 mb-4">{{#str}} noresultsfor, core, {{searchterm}}{{/str}}</span>
+    {{/hasresults}}
+</div>

lib/templates/local/comboboxsearch/searchbody.mustache

@@ -0,0 +1,49 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/comboboxsearch/searchbody
+
+    Wrapping template for search input.
+
+    Context variables required for this template:
+    * courseid - The id of the course to search within the report of.
+    * currentvalue - The string the user searched for previously.
+
+    Example context (json):
+    {
+        "courseid": 2,
+        "currentvalue": "Abed"
+    }
+}}
+<div class="flex-column h-100 w-100">
+    <span class="d-none" data-region="courseid" data-courseid="{{courseid}}" aria-hidden="true"></span>
+    {{< core/search_input_auto }}
+        {{$label}}{{#str}}
+            searchitems, core
+        {{/str}}{{/label}}
+        {{$placeholder}}{{#str}}
+            searchitems, core
+        {{/str}}{{/placeholder}}
+        {{$value}}{{currentvalue}}{{/value}}
+        {{$additionalattributes}}
+            role="combobox"
+            aria-expanded="true"
+            aria-controls="list-{{instance}}-result-listbox"
+            aria-autocomplete="list"
+            data-input-element="result-input-{{uniqid}}-{{instance}}"
+        {{/additionalattributes}}
+    {{/ core/search_input_auto }}
+    <input type="hidden" name="search" id="result-input-{{uniqid}}-{{instance}}"/>
+    <div data-region="searchplaceholder"></div>
+</div>

lib/templates/local/dropdown/dialog.mustache

@@ -0,0 +1,111 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/dropdown/dialog
+
+    Displays a dropdown dialog component.
+
+    Classes required for JS:
+    * none
+
+    Context variables required for this template:
+    * buttoncontent String - the dropdown trigger button content.
+    * dialogcontent String - the dropdown dialog content.
+
+    Optional blocks:
+    * dropdownclasses - additional classes for the dropdown.
+    * buttonclasses - additional classes for the dropdown trigger button.
+    * dialogclasses - additional classes for the dropdown dialog.
+    * dialogcontent - the dropdown dialog content.
+    * buttoncontent - the dropdown trigger button content.
+    * extras - custom HTML attributes for the component.
+    * dropdownid - the dropdown id (will be auto-generate if no id is passed).
+
+    Example context (json):
+    {
+        "dropdownid": "internaldropdownid",
+        "buttonid": "internalbuttonid",
+        "buttoncontent": "Trigger button",
+        "dialogcontent": "<a href=\"#\">Moodle</a>",
+        "extras": [
+            {
+                "attribute": "data-example",
+                "value": "stickyfooter"
+            }
+        ],
+        "buttonclasses": "extraclasses",
+        "dialogclasses": "extraclasses",
+        "disabledbutton": false,
+        "classes": "extraclasses"
+    }
+}}
+<div
+    class="dropdown {{!
+        }} {{$ dropdownclasses }} {{!
+            }} {{#classes}} {{classes}} {{/classes}} {{!
+        }} {{/ dropdownclasses }}"
+    id="{{$ dropdownid }}{{!
+            }}{{#dropdownid}}{{dropdownid}}{{/dropdownid}}{{!
+            }}{{^dropdownid}}dropdownDialog_{{uniqid}}{{/dropdownid}}{{!
+        }}{{/ dropdownid }}"
+    {{$ extras }}
+        {{#extras}}
+            {{attribute}}="{{value}}"
+        {{/extras}}
+    {{/ extras }}
+>
+    <button
+        class="{{$ buttonclasses }} {{!
+                }} {{^buttonclasses}} btn btn-light btn-outline-secondary dropdown-toggle {{/buttonclasses}} {{!
+                }} {{#buttonclasses}} {{buttonclasses}} {{/buttonclasses}} {{!
+            }} {{/ buttonclasses }}"
+        type="button"
+        id="{{#buttonid}}{{buttonid}}{{/buttonid}}{{^buttonid}}dropdownDialog{{uniqid}}{{/buttonid}}"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+        data-for="dropdowndialog_button"
+        {{#disabledbutton}} disabled {{/disabledbutton}}
+    >
+        {{$ buttoncontent }}
+            {{{ buttoncontent }}}
+        {{/ buttoncontent }}
+    </button>
+    <div
+        class="dropdown-menu {{!
+            }} {{#position}} {{position}} {{/position}} {{!
+            }} {{$ dialogclasses }} {{!
+                }} {{#dialogclasses}} {{dialogclasses}} {{/dialogclasses}} {{!
+            }} {{/ dialogclasses }}"
+        aria-labelledby="{{#buttonid}}{{buttonid}}{{/buttonid}}{{^buttonid}}dropdownDialog{{uniqid}}{{/buttonid}}"
+        data-for="dropdowndialog_dialog"
+    >
+        <div class="p-2" data-for="dropdowndialog_content">
+            {{$ dialogcontent }}
+                {{{dialogcontent}}}
+            {{/ dialogcontent }}
+        </div>
+    </div>
+</div>
+{{#js}}
+    require(['core/local/dropdown/dialog'], function(Module) {
+        Module.init('#' + '{{$ dropdownid }}{{!
+            }}{{#dropdownid}}{{dropdownid}}{{/dropdownid}}{{!
+            }}{{^dropdownid}}dropdownDialog_{{uniqid}}{{/dropdownid}}{{!
+        }}{{/ dropdownid }}');
+    });
+{{/js}}

lib/templates/local/dropdown/status.mustache

@@ -0,0 +1,109 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/dropdown/status
+
+    Displays a dropdown status selector component.
+
+    Classes required for JS:
+    * none
+
+    Context variables required for this template:
+    * buttoncontent String - the dropdown trigger button content.
+    * choices Array - the status options.
+
+    Example context (json):
+    {
+        "buttonid" : "someinternalid",
+        "buttoncontent" : "Trigger button",
+        "choices" : {
+            "hasoptions": true,
+            "dialogcontent": "Dialog content",
+            "options": [
+                {
+                    "optionid": "option1",
+                    "value": "value1",
+                    "name": "First option",
+                    "description": "First option description",
+                    "hasicon": false,
+                    "first": true,
+                    "optionnumber": 1,
+                    "optionuniqid": "option1uniqid",
+                    "selected": true
+                },
+                {
+                    "optionid": "option2",
+                    "value": "value2",
+                    "name": "Second option",
+                    "description": "Second option description",
+                    "icon": {
+                        "extraclasses": "iconhelp",
+                        "attributes": [
+                            {"name": "src", "value": "../../../pix/help.svg"},
+                            {"name": "alt", "value": "Help icon"}
+                        ]
+                    },
+                    "hasicon": true,
+                    "optionnumber": 2,
+                    "optionuniqid": "option2uniqid"
+                },
+                {
+                    "optionid": "option3",
+                    "value": "value3",
+                    "name": "Third option",
+                    "description": "Third option description",
+                    "icon": {
+                        "extraclasses": "iconhelp",
+                        "attributes": [
+                            {"name": "src", "value": "../../../pix/help.svg"},
+                            {"name": "alt", "value": "Help icon"}
+                        ]
+                    },
+                    "hasicon": true,
+                    "disabled": true,
+                    "optionnumber": 3,
+                    "optionuniqid": "option3uniqid"
+                }
+            ]
+        },
+        "extras" : [
+            {
+                "attribute" : "data-example",
+                "value" : "stickyfooter"
+            }
+        ],
+        "buttonclasses" : "extraclasses"
+    }
+}}
+{{< core/local/dropdown/dialog }}
+    {{$ dialogcontent }}
+        {{#dialogcontent}}
+        <div class="pb-2 border-bottom">{{{dialogcontent}}}</div>
+        {{/dialogcontent}}
+        {{#choices}}
+            {{> core/local/choicelist }}
+        {{/choices}}
+    {{/ dialogcontent }}
+{{/ core/local/dropdown/dialog }}
+{{#js}}
+    require(['core/local/dropdown/status'], function(Module) {
+        Module.init('#' + '{{$ dropdownid }}{{!
+            }}{{#dropdownid}}{{dropdownid}}{{/dropdownid}}{{!
+            }}{{^dropdownid}}dropdownDialog_{{uniqid}}{{/dropdownid}}{{!
+        }}{{/ dropdownid }}');
+    });
+{{/js}}

lib/templates/local/modal/alert.mustache

@@ -0,0 +1,45 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/modal/alert
+
+    Moodle modal template with one oaky button.
+
+    The purpose of this template is to render an alert modal with an acceptance option.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * title A cleaned string (use clean_text()) to display.
+    * body HTML content for the boday
+
+    Example context (json):
+    {
+        "title": "Example cancel modal",
+        "body": "Some example content for the body"
+    }
+}}
+
+{{< core/modal }}
+    {{$footer}}
+        <button type="button" class="btn btn-primary" data-action="cancel">{{#str}}ok, moodle{{/str}}</button>
+    {{/footer}}
+{{/ core/modal }}

lib/templates/local/notification/cta.mustache

@@ -0,0 +1,68 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/notification/cta
+
+    Moodle cta notification template.
+
+    The purpose of this template is to render a call to action notification.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * message A cleaned string (use clean_text()) to display.
+    * extraclasses Additional classes to apply to the notification.
+    * actions List of action links.
+    * icon An icon.pix and icon.componrnt for the icon to be displauyed as the icon of CTA notification.
+
+    Example context (json):
+    {
+        "message": "What do you think about Moodle?",
+        "actions": [
+            {
+                "title": "Give feedback",
+                "url": "#",
+                "data": [
+                    {"name": "action", "value": "give"},
+                    {"name": "contextid", "value": "3"}
+                ]
+            }
+        ]
+    }
+}}
+
+<div class="cta alert alert-primary alert-block fade in {{ extraclasses }}" {{# region }}data-region="{{ region }}"{{/ region}}>
+    <div class="d-flex">
+        <div class="cta-icon mr-2 icon-size-5 flex-shrink-0">
+            {{# pix }} {{ icon.pix }}, {{ icon.component }} {{/ pix }}
+        </div>
+        <div class="align-self-center flex-grow-1">
+            {{{ message }}}<br>
+            {{# actions }}
+                <a href="{{ url }}" class="link-underline aalink"
+                    {{# data }}
+                   data-{{ name }}="{{ value }}"
+                    {{/ data }}
+                >{{ title }}{{#newwindow}}<span class="ml-1">{{#pix}}i/externallink, core, {{#str}}opensinnewwindow{{/str}}{{/pix}}</span>{{/newwindow}}</a>
+            {{/ actions }}
+        </div>
+    </div>
+</div>

lib/templates/local/process_monitor/monitor.mustache

@@ -0,0 +1,57 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/process_monitor/monitor
+
+    Template to render the global reactive debug panel.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+        "title": "Some title"
+    }
+}}
+<div
+    id="process-monitor-{{uniqid}}"
+    class="popover-process-monitor d-none shadow"
+>
+    <div class="modal-header " data-region="header">
+        <h5 class="modal-title" data-region="title">
+            {{#title}} {{title}} {{/title}}
+            {{^title}} {{#str}} progress, core {{/str}} {{/title}}
+        </h5>
+        <button
+            type="button"
+            class="close"
+            data-action="hide"
+            aria-label="{{#str}}closebuttontitle, core{{/str}}"
+        >
+            <span aria-hidden="true">×</span>
+        </button>
+    </div>
+    <div data-for="process-list" class="process-list"></div>
+</div>
+{{#js}}
+require(['core/local/process_monitor/monitor'], function(component) {
+    component.init('#process-monitor-{{uniqid}}');
+});
+{{/js}}

lib/templates/local/process_monitor/process.mustache

@@ -0,0 +1,57 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/process_monitor/process
+
+    Template to render a process inside the process monitor.
+
+    Example context (json):
+    {
+        "id": 42,
+        "name": "Sample",
+        "percentage": 30,
+        "error": "Something goes wrong"
+    }
+}}
+<div
+    class="queue-process d-flex flex-column p-2"
+    data-for="queue-process"
+    data-id="{{id}}"
+>
+    <div class="d-flex flex-row align-items-center">
+        <div class="p-2 uploadname text-truncate" data-for="name"> {{name}} </div>
+        <div class="ml-auto p-2 progressbar">
+            <progress value="{{percentage}}" max="100"></progress>
+            <button
+                type="button"
+                class="d-none close"
+                data-action="closeProcess"
+                aria-label="{{#str}}closebuttontitle, core{{/str}}"
+            >
+                <span aria-hidden="true">×</span>
+            </button>
+        </div>
+    </div>
+    <div class="d-none alert alert-danger" role="alert" data-for="error">
+        {{error}}
+    </div>
+</div>
+{{#js}}
+require(['core/local/process_monitor/process'], function(component) {
+    component.init('[data-for="queue-process"][data-id="{{id}}"]');
+});
+{{/js}}

lib/templates/local/reactive/debuginstancepanel.mustache

@@ -0,0 +1,86 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/reactive/debuginstancepanel
+
+    Template to render the global reactive debug panel.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+        "id": "instanceid"
+    }
+}}
+<div id="{{uniqid}}-reactive-debugpanel-instance" data-id="{{id}}" class="card text-dark">
+    <div class="card-body">
+        <h5 class="card-title" data-for="name">
+            {{id}}
+            <button href="#" class="btn btn-secondary" data-for="pin" data-alt="{{#str}} reactive_pin , core_debug {{/str}}">
+                {{#str}} reactive_unpin , core_debug {{/str}}
+            </button>
+            <button href="#" class="btn btn-danger float-right" data-for="close">
+                {{#str}} close , admin {{/str}}
+            </button>
+        </h5>
+        <p class="card-text">
+            <button
+                class="btn btn-secondary"
+                data-for="highlight"
+                data-alt="{{#str}} reactive_highlighton , core_debug {{/str}}"
+            >
+                {{#str}} reactive_highlightoff , core_debug {{/str}}
+            </button>
+            <button
+                class="btn btn-secondary"
+                data-for="readmode"
+                data-alt="{{#str}} reactive_readmodeoff , core_debug {{/str}}"
+            >
+                {{#str}} reactive_readmodeon , core_debug {{/str}}
+            </button>
+            <button
+                class="btn btn-secondary"
+                data-for="clean"
+            >
+                {{#str}} reactive_resetpanel , core_debug {{/str}}
+            </button>
+        </p>
+        <div>
+            <h6>
+                {{#str}} reactive_statedata , core_debug {{/str}}
+                <button class="btn btn-secondary" data-for="save" disabled>
+                    {{#str}} save , admin {{/str}}
+                </button>
+                <span data-for="invalid">{{#str}} reactive_saveingwarning , core_debug {{/str}}</span>
+            </h6>
+            <textarea class="w-100" style="resize:vertical; height: 20em;" data-for="state" draggable="false"></textarea>
+        </div>
+        <div>
+            <h6>State events log</h6>
+            <textarea class="w-100" style="resize:vertical; height: 20em;" data-for="log" draggable="false"></textarea>
+        </div>
+  </div>
+</div>
+{{#js}}
+require(['core/local/reactive/debugpanel'], function(component) {
+    component.initsubpanel('{{uniqid}}-reactive-debugpanel-instance');
+});
+{{/js}}

lib/templates/local/reactive/debugpanel.mustache

@@ -0,0 +1,49 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/reactive/debugpanel
+
+    Template to render the global reactive debug panel.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+    }
+}}
+<div id="{{uniqid}}-reactive-debugpanel" class="py-1">
+    <div>
+        {{#str}} reactive_instances , core_debug {{/str}}
+        <span data-for="loaders">
+            <span data-for="noinstances">
+                {{#str}} reactive_noinstances , core_debug {{/str}}
+            </span>
+        </span>
+    </div>
+    <div data-for="subpanel">
+        {{> core/loading }}
+    </div>
+</div>
+{{#js}}
+require(['core/local/reactive/debugpanel'], function(component) {
+    component.init('{{uniqid}}-reactive-debugpanel');
+});
+{{/js}}

lib/templates/local/reactive/overlay.mustache

@@ -0,0 +1,36 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/reactive/overlay
+    Template to render the global reactive debug panel.
+    Classes required for JS:
+    * none
+    Data attributes required for JS:
+    * none
+    Example context (json):
+    {
+        "content": "Drop here!",
+        "icon": "<i class='icon fa fa-question-circle'></i>"
+    }
+}}
+<div class="overlay-preview" data-overlay="true">
+    {{#content}}
+    <div class="overlay-preview-wrapper" data-overlay-dynamic="true">
+        <div class="overlay-preview-content">
+            {{{icon}}}
+            {{content}}
+        </div>
+    </div>
+    {{/content}}
+</div>

lib/templates/local/toast/message.mustache

@@ -0,0 +1,65 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/local/toast/message
+
+    Template to render a Toast notification.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+        "data": 200,
+        "autohide": true,
+        "Message": "Cubing negative numbers is tough",
+        "title": "Negative numbers",
+        "subtitle": "Cubing",
+        "type": "info",
+        "closebutton": true
+    }
+}}
+<div id="toast-{{uniqid}}" class="toast mx-auto {{#type}}toast-{{type}}{{/type}}" data-delay="{{delay}}" {{^autohide}}data-autohide="false"{{/autohide}}>
+    {{#title}}
+    <div class="toast-header">
+        <span class="toast-title">{{{title}}}</span>
+        {{#subtitle}}<span class="toast-subtitle ml-auto small">{{{subtitle}}}</span>{{/subtitle}}
+    </div>
+    {{/title}}
+    <div class="toast-body d-flex">
+        <div class="toast-message px-1">{{{message}}}</div>
+        {{#closeButton}}
+        <button type="button" class="ml-auto align-self-baseline close" data-dismiss="toast" aria-label="{{#str}}dismissnotification, core{{/str}}">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        {{/closeButton}}
+    </div>
+</div>
+{{#js}}
+require(['jquery', 'theme_boost/bootstrap/toast'], function(jQuery) {
+    // Show the toast.
+    // Bootstrap toast components are not shown automatically.
+    jQuery('#toast-{{uniqid}}').toast('show');
+
+    jQuery('#toast-{{uniqid}}').on('hidden.bs.toast', function(e) {
+        e.target.remove();
+    });
+});
+{{/js}}

lib/templates/local/toast/wrapper.mustache

@@ -0,0 +1 @@
+<div class="toast-wrapper mx-auto py-0 fixed-top" role="status" aria-live="polite"></div>