[4.0] BS beta 3

build/build-modules-js/javascript/build-bootstrap-js.es6.js

@@ -32,6 +32,7 @@ const build = async () => {
     plugins: [
       nodeResolve(),
       replace({
+        preventAssignment: true,
         'process.env.NODE_ENV': '\'production\'',
       }),
       babel({
@@ -43,7 +44,11 @@ const build = async () => {
             '@babel/preset-env',
             {
               targets: {
-                esmodules: true,
+                browsers: [
+                  '> 1%',
+                  'not ie 11',
+                  'not op_mini all',
+                ],
               },
             },
           ],
@@ -65,6 +70,7 @@ const build = async () => {
       collapse: ['build/media_source/vendor/bootstrap/js/collapse.es6.js'],
       dropdown: ['build/media_source/vendor/bootstrap/js/dropdown.es6.js'],
       modal: ['build/media_source/vendor/bootstrap/js/modal.es6.js'],
+      offcanvas: ['build/media_source/vendor/bootstrap/js/offcanvas.es6.js'],
       popover: ['build/media_source/vendor/bootstrap/js/popover.es6.js'],
       scrollspy: ['build/media_source/vendor/bootstrap/js/scrollspy.es6.js'],
       tab: ['build/media_source/vendor/bootstrap/js/tab.es6.js'],
@@ -102,6 +108,7 @@ const buildLegacy = async () => {
       commonjs(),
       nodeResolve(),
       replace({
+        preventAssignment: true,
         'process.env.NODE_ENV': '\'production\'',
       }),
       babel({

build/build-modules-js/settings.json

@@ -151,6 +151,17 @@
               "type": "module"
             }
           },
+          {
+            "name": "bootstrap.offcanvas",
+            "type": "script",
+            "uri": "offcanvas.min.js",
+            "dependencies": [
+              "bootstrap.es5"
+            ],
+            "attributes": {
+              "type": "module"
+            }
+          },
           {
             "name": "bootstrap.popover",
             "type": "script",

build/media_source/vendor/bootstrap/js/index.es6.js

@@ -4,6 +4,7 @@ import Collapse from './collapse.es6';
 import Carousel from './carousel.es6';
 import Dropdown from './dropdown.es6';
 import Modal from './modal.es6';
+import Offcanvas from './offcanvas.es6';
 import { Popover } from './popover.es6';
 import Scrollspy from './scrollspy.es6';
 import Tab from './tab.es6';
@@ -16,6 +17,7 @@ export {
   Carousel,
   Dropdown,
   Modal,
+  Offcanvas,
   Popover,
   Scrollspy,
   Tab,

build/media_source/vendor/bootstrap/js/offcanvas.es6.js

@@ -0,0 +1,28 @@
+import Offcanvas from '../../../../../node_modules/bootstrap/js/src/offcanvas';
+
+window.bootstrap = window.bootstrap || {};
+window.bootstrap.Offcanvas = Offcanvas;
+
+if (Joomla && Joomla.getOptions) {
+  // Get the elements/configurations from the PHP
+  const offcanvases = Joomla.getOptions('bootstrap.offcanvas');
+  // Initialise the elements
+  if (typeof offcanvases === 'object' && offcanvases !== null) {
+    Object.keys(offcanvases)
+      .forEach((offcanvas) => {
+        const opt = offcanvases[offcanvas];
+        const options = {
+          backdrop: opt.backdrop ? opt.backdrop : true,
+          keyboard: opt.keyboard ? opt.keyboard : true,
+          scroll: opt.scroll ? opt.scroll : true,
+        };
+
+        const elements = Array.from(document.querySelectorAll(offcanvas));
+        if (elements.length) {
+          elements.map((el) => new window.bootstrap.Offcanvas(el, options));
+        }
+      });
+  }
+}
+
+export default Offcanvas;

libraries/src/HTML/Helpers/Bootstrap.php

@@ -257,7 +257,7 @@ public static function dropdown($selector = '', $params = []) :void
 	}
 
 	/**
-	 * Method to render a Bootstrap modal
+	 * Add javascript support for Bootstrap modal
 	 *
 	 * @param   string  $selector  The ID selector for the modal.
 	 * @param   array   $options   An array of options for the modal.
@@ -299,6 +299,48 @@ public static function modal($selector = '', $options = []) :void
 		static::$loaded[__METHOD__][$selector] = true;
 	}
 
+	/**
+	 * Add javascript support for Bootstrap offcanvas
+	 *
+	 * @param   string  $selector  The ID selector for the offcanvas.
+	 * @param   array   $options   An array of options for the offcanvas.
+	 *
+	 * @return  void
+	 *
+	 * @since   4.0.0
+	 *
+	 * Options for the offcanvas can be:
+	 * - backdrop     boolean  true   Apply a backdrop on body while offcanvas is open
+	 * - keyboard     boolean  true   Closes the offcanvas when escape key is pressed
+	 * - scroll       boolean  false  Allow body scrolling while offcanvas is open
+	 */
+	public static function offcanvas($selector = '', $options = []) :void
+	{
+		// Only load once
+		if (!empty(static::$loaded[__METHOD__][$selector]))
+		{
+			return;
+		}
+
+		if ($selector !== '')
+		{
+			// Setup options object
+			$opt['backdrop'] = isset($options['backdrop']) ? (bool) $options['backdrop'] : true;
+			$opt['keyboard'] = isset($options['keyboard']) ? (bool) $options['keyboard'] : true;
+			$opt['scroll']   = isset($options['scroll']) ? (bool) $options['scroll'] : false;
+
+			Factory::getDocument()->addScriptOptions('bootstrap.offcanvas', [$selector => (object) array_filter((array) $opt)]);
+		}
+
+		// Include the Bootstrap component
+		Factory::getApplication()
+			->getDocument()
+			->getWebAssetManager()
+			->useScript('bootstrap.offcanvas');
+
+		static::$loaded[__METHOD__][$selector] = true;
+	}
+
 	/**
 	 * Add javascript support for Bootstrap popovers
 	 *
@@ -575,7 +617,7 @@ public static function framework($debug = null) :void
 			function ($script) use ($wa) {
 				$wa->useScript('bootstrap.' . $script);
 			},
-			['alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal', 'popover', 'scrollspy', 'tab', 'toast']
+			['alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal', 'offcanvas', 'popover', 'scrollspy', 'tab', 'toast']
 		);
 	}
 

package.json

@@ -37,7 +37,7 @@
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "accessibility": "^3.0.10",
     "awesomplete": "1.1.5",
-    "bootstrap": "^5.0.0-beta2",
+    "bootstrap": "^5.0.0-beta3",
     "choices.js": "^9.0.1",
     "chosen-js": "^1.8.7",
     "codemirror": "^5.60.0",