** Major Release Changes**

In brief, a complete rework of all components for stronger TypeScript or improved JavaScript consistency, as well as new features.

* Added full RTL support for Carousel, Dropdown, Popover & Tooltip
* Tooltip & Popover make use of a new way to determine the best `container` option and `parentOffset` similar to [floating-ui](https://floating-ui.com/), slightly more simple and efficient, the `container` option is possible to become deprecated
* Tooltip & Popover have a better way to determine the best container option, will even override an incorrectly configured container option
* Tooltip & Popover all utilities now work best in any configuration, any container, the viewport is always what's called the "clippingParent" for the original library
* Carousel will now work with multiple instances of arrows, indicators, within the instance markup (`data-bs-target` attribute is optional) or outside the instance markup (`data-bs-target` attribute is required)
* Modal / Offcanvas make use of a container similar to Tooptip / Popover to append the overlay, no option is required
* all event listeners now use `e.code` instead of the legacy `e.which`
* Dropdown fixed repositioning in all possible ways
* Added `relatedTarget` property to all Offcanvas events
* Added `relatedTarget` property to ScrollSpy event
* Added `relatedTarget` property to all Toast events
* Toast - added `interactiveToastHandler` for  handler to prevent the autohide behavior to kick in when user interacts with the toast instance without closing it (usually by hovering or focusing the toast)
* Toast - changed default delay from 500 to 5000 (miliseconds)
* Toast - fixed `hide.bs.toast` event missfire
* all components and utils use a new way to refer to `Document` / `Window` similar to [floating-ui](https://floating-ui.com/), in theory should enable access & control over components initialized within iframes smiley face ;)
* Some components make use of a new `Timer` to guard against unwanted execution (Carousel, Collapse, Modal, Tooltip Popover, Tab, Toast), with other words, spamming triggering event on Tooltip will never break the instance
* TypeScript improvements all round, not only that but now esm modules are also with strong TypeScript definitions
* V4 uses new legacy `shorter-js` utils, V5 uses lighter new revamped utils
* Re-added `on` / `off` utils for TypeScript consistency
* some changes to initialization callback, allowing components to initialize `customElements`
* Demo improvements

.gitignore

@@ -2,5 +2,5 @@ package-lock.json
 .npmignore
 .vscode/
 node_modules/
-local/
+experiments/
 demo.html

.npmignore

@@ -2,7 +2,7 @@
 .vscode/
 assets/
 node_modules/
-local/
+experiments/
 CONTRIBUTING.md
 package-lock.json
 index.html

assets/css/theme.css

@@ -91,9 +91,12 @@ pre[class*="language-"] {margin: 0 0 1rem}
   top: 0.5rem
 }
 .nav-stacked ul {
-  padding-left: 1rem;
+  padding: 0 0 0 1rem;
   display: none
 }
+[dir="rtl"] .nav-stacked ul {
+  padding: 0 1rem 0 0;
+}
 .nav-stacked li > a.active + ul { display: block }
 
 /* v5 nav */

assets/js/scripts.js

@@ -118,7 +118,12 @@ var tooltipTemplateExample = new BSN.Tooltip('#tooltipTemplateExample', {
 	sanitizeFn: function(dirty){
 		return DOMPurify.sanitize( dirty );
 	}	
-})
+});
+
+// Tooltip HTMLElement as title option
+var tooltipElementContent = document.getElementById('tooltipElementContent');
+var tooltipTitle = document.createElement('span'); tooltipTitle.innerHTML = '<b>Tooltip on LEFT</b> <span class="badge bg-danger">HOT</span><br>This tooltip uses a title set via JavaScript as <code>HTMLElement</code> elements.<br>This feature is JavaScript only.';
+new BSN.Tooltip(tooltipElementContent, { title: tooltipTitle });
 
 // Popover 
 var popover1 = new BSN.Popover('#popover-via-click', { container: '#popoverExamples',	trigger: 'click' } );
@@ -146,23 +151,32 @@ popoverEvents.addEventListener('shown.bs.popover', function(){ console.log('The
 popoverEvents.addEventListener('hide.bs.popover', function(){ console.log('The hide.bs.popover event fired for #' + popoverEvents.id); }, false);
 popoverEvents.addEventListener('hidden.bs.popover', function(){ console.log('The hidden.bs.popover event fired for #' + popoverEvents.id); }, false);
 
+var popoverElementContents = document.getElementById('popoverElementContents');
+var popoverTitle = document.createElement('span'); popoverTitle.innerHTML = 'Popover on RIGHT <span class="badge bg-danger">HOT</span>';
+var popoverContent = document.createElement('span'); popoverContent.innerHTML = 'This popover uses a custom <code>class</code> set via <code>data-bs-custom-class</code> attribute, but the title and content are set via JavaScript as <code>HTMLElement</code> elements. This feature is JavaScript only.';
+new BSN.Popover(popoverElementContents, {
+	title: popoverTitle,
+	content: popoverContent
+});
+
 // TOAST
 var toastBTN = document.getElementById('myTastyToastBTN');
 var toastElement = toastBTN.closest('.toast');
 var showToastBTN = document.getElementById('showToastBTN');
+
 toastElement.addEventListener('show.bs.toast',function(e){
-	console.log( 'The "show.bs.toast" event fired for #' + toastBTN.id );
+	console.log( 'The "show.bs.toast" event fired for #' + toastElement.id );
 },false)
 toastElement.addEventListener('shown.bs.toast',function(e){
-	console.log( 'The "shown.bs.toast" event fired for #' + toastBTN.id );
-	showToastBTN.classList.add('d-none')
+	console.log( 'The "shown.bs.toast" event fired for #' + toastElement.id );
+	// showToastBTN.classList.add('d-none')
 },false)
 toastElement.addEventListener('hide.bs.toast',function(e){
-	console.log( 'The "hide.bs.toast" event fired for #' + toastBTN.id );
+	console.log( 'The "hide.bs.toast" event fired for #' + toastElement.id );
 },false)
 toastElement.addEventListener('hidden.bs.toast',function(e){
-	console.log( 'The "hidden.bs.toast" event fired for #' + toastBTN.id );
-	showToastBTN.classList.remove('d-none')
+	console.log( 'The "hidden.bs.toast" event fired for #' + toastElement.id );
+	// showToastBTN.classList.remove('d-none')
 },false)
 
 showToastBTN.addEventListener('click',function(){
@@ -171,17 +185,27 @@ showToastBTN.addEventListener('click',function(){
 }, false)
 
 // ScrollSpy
+var disposableSpy = document.getElementById('disposableSpy');
+var scrollSpyEventCallback = function(e){
+	const { tagName, classList } = e.relatedTarget;
+	var scrollSpyLog = 'The "activate.bs.scrollspy" event fired for #' + disposableSpy.id
+		+ '\nevent.relatedTarget: ' + (e.relatedTarget ? (tagName + '.' + [...classList].join('.')) : 'null');
+	console.log(scrollSpyLog);
+}
+disposableSpy.addEventListener('activate.bs.scrollspy', scrollSpyEventCallback);
+
 function toggleScrollSpy(){
-	var disposableSpy = document.getElementById('disposableSpy');
 	var spyInstance = BSN.ScrollSpy.getInstance(disposableSpy);
 
 	if ( spyInstance ){
+		disposableSpy.removeEventListener('activate.bs.scrollspy', scrollSpyEventCallback);
 		spyInstance.dispose()
 		this.innerHTML = 'Init'
 		this.classList.remove( 'btn-outline-danger' )
 		this.classList.add( 'btn-outline-primary' )
 	} else {
 		new BSN.ScrollSpy(disposableSpy)
+		disposableSpy.addEventListener('activate.bs.scrollspy', scrollSpyEventCallback);
 		this.innerHTML = 'Dispose'
 		this.classList.remove( 'btn-outline-primary' )                        
 		this.classList.add( 'btn-outline-danger' )
@@ -226,4 +250,21 @@ carouselGenericExample.addEventListener('slid.bs.carousel', function(e) {
 	var to = `\n> to index ${e.to}`;
 	var direction = `\n> with direction ${e.direction}`;
 	console.log('The "slid.bs.carousel" event fired for <div id="' + carouselGenericExample.id + '"> ' + direction + from + to + related);
-}, false);
+}, false);
+
+// RTL play
+function switchDirection() {
+	var isRTL = document.documentElement.dir === 'rtl';
+	var bsCSS = document.getElementById('bsCSS');
+	var href = bsCSS.getAttribute('href');
+
+	if (isRTL) {
+		bsCSS.href = href.replace('bootstrap.rtl.min', 'bootstrap.min');
+		document.documentElement.removeAttribute('dir');
+		this.innerText = 'RTL';
+	} else {
+		bsCSS.href = href.replace('bootstrap.min', 'bootstrap.rtl.min');
+		document.documentElement.setAttribute('dir', 'rtl');
+		this.innerText = 'LTR';
+	}
+}