Preview release new BSCollapse Animation handler.

Fixes: BSCollapse Animation handler
Fixes: Navbar Toggler
Updated: Navbar Example

docs/_content/BlazorStrap/blazorStrap.js

@@ -1,4 +1,5 @@
 var link;
+var script;
 
 // MDN String.include polyfill
 if (!String.prototype.includes) {
@@ -14,36 +15,48 @@ if (!String.prototype.includes) {
 
 window.blazorStrap = {
     modal: {
-        paddingRight: function (padding) {
+        paddingRight: function(padding) {
             var dpi = window.devicePixelRatio;
             if (dpi === 1 || !padding) {
                 document.body.style.paddingRight = padding;
             }
             return true;
         },
         eventListeners: [],
-        open: function (id) {
+        open: function(id) {
             if (!document.body.classList.contains("modal-open")) {
                 document.body.classList.add("modal-open");
             }
-            this.paddingRight("17px");
+            var body = document.body,
+                html = document.documentElement;
+            var height = Math.max(body.scrollHeight,
+                body.offsetHeight,
+                html.clientHeight,
+                html.scrollHeight,
+                html.offsetHeight);
+            if (height > window.innerHeight) {
+                this.paddingRight("17px");
+            }
             return id;
         },
-        close: function (id) {
+        close: function(id) {
             for (var i = 0; i < this.eventListeners.length; ++i) {
                 if (this.eventListeners[i].id == id) {
-                    
+
                     if (i + 1 != this.eventListeners.length) {
                         this.eventListeners.splice(i, 1);
-                    }
-                    else {
+                    } else {
                         // Removes this event listener.
-                        document.removeEventListener("keyup", window.blazorStrap.modal.eventListeners[window.blazorStrap.modal.eventListeners.length - 1].func);
+                        document.removeEventListener("keyup",
+                            window.blazorStrap.modal.eventListeners[window.blazorStrap.modal.eventListeners.length - 1]
+                            .func);
                         window.blazorStrap.modal.eventListeners.pop();
 
                         // Adds Event listener back to modal under closing modal.
                         if (window.blazorStrap.modal.eventListeners.length >= 1)
-                            document.addEventListener("keyup", window.blazorStrap.modal.eventListeners[window.blazorStrap.modal.eventListeners.length - 1].func);
+                            document.addEventListener("keyup",
+                                window.blazorStrap.modal.eventListeners[window.blazorStrap.modal.eventListeners.length -
+                                    1].func);
                         else {
                             document.body.classList.remove("modal-open");
                             window.blazorStrap.modal.paddingRight("");
@@ -52,76 +65,82 @@ window.blazorStrap = {
                 }
             }
         },
-        initOnEscape: function (id) {
-            this.eventListeners.push({id: id, func: function (e) {
-                if (e.key == "Escape") {
-                    DotNet.invokeMethodAsync("BlazorStrap", "OnModalEscape", id);
+        initOnEscape: function(id) {
+            this.eventListeners.push({
+                id: id,
+                func: function(e) {
+                    if (e.key == "Escape") {
+                        DotNet.invokeMethodAsync("BlazorStrap", "OnModalEscape", id);
 
-                    // Removes this event listener.
-                    document.removeEventListener("keyup", window.blazorStrap.modal.eventListeners[window.blazorStrap.modal.eventListeners.length - 1].func);
-                    window.blazorStrap.modal.eventListeners.pop();
+                        // Removes this event listener.
+                        document.removeEventListener("keyup",
+                            window.blazorStrap.modal.eventListeners[window.blazorStrap.modal.eventListeners.length - 1]
+                            .func);
+                        window.blazorStrap.modal.eventListeners.pop();
 
-                    // Adds Event listener back to modal under closing modal.
-                    if (window.blazorStrap.modal.eventListeners.length >= 1)
-                        document.addEventListener("keyup", window.blazorStrap.modal.eventListeners[window.blazorStrap.modal.eventListeners.length - 1].func);
-                    else {
-                        document.body.classList.remove("modal-open");
-                        window.blazorStrap.modal.paddingRight("");
-                    }
-                };
-            }});
+                        // Adds Event listener back to modal under closing modal.
+                        if (window.blazorStrap.modal.eventListeners.length >= 1)
+                            document.addEventListener("keyup",
+                                window.blazorStrap.modal.eventListeners[window.blazorStrap.modal.eventListeners.length -
+                                    1].func);
+                        else {
+                            document.body.classList.remove("modal-open");
+                            window.blazorStrap.modal.paddingRight("");
+                        }
+                    };
+                }
+            });
             // Removes event listener from modal under current modal.
-            if(this.eventListeners.length > 1)
+            if (this.eventListeners.length > 1)
                 document.removeEventListener("keyup", this.eventListeners[this.eventListeners.length - 2].func);
             // Adds new event listener for just opened modal.
             document.addEventListener("keyup", this.eventListeners[this.eventListeners.length - 1].func);
             return id;
         }
     },
     poppers: [],
-    animationEvent: function (event) {
+    animationEvent: function(event) {
         if (event.target.hasAttributes()) {
             var name = "";
             var attrs = event.target.attributes;
             for (var i = 0; i < attrs.length; ++i) {
-                 name = attrs[i].name;
+                name = attrs[i].name;
                 if (name.includes("_bl_")) {
                     name = name.replace("_bl_", "");
                     break;
                 }
             }
             DotNet.invokeMethodAsync("BlazorStrap", "OnAnimationEnd", name);
-        }
-        else {
+        } else {
             DotNet.invokeMethodAsync("BlazorStrap", "OnAnimationEnd", event.target.id);
         }
     },
-    log: function (message) {
+    log: function(message) {
         console.log("message: ", message);
         return true;
     },
-    addBodyClass: function (Classname) {
+    addBodyClass: function(Classname) {
         if (Classname == "modal-open") {
             this.changeBodyPaddingRight("17px");
         }
         document.body.classList.add(Classname);
         return true;
     },
-    removeBodyClass: function (Classname) {
+    removeBodyClass: function(Classname) {
         if (Classname == "modal-open") {
             this.changeBodyPaddingRight("");
         }
         document.body.classList.remove(Classname);
         return true;
     },
-    changeBodyPaddingRight: function (padding) {
+    changeBodyPaddingRight: function(padding) {
         var dpi = window.devicePixelRatio;
         if (dpi === 1 || !padding) {
             document.body.style.paddingRight = padding;
         }
         return true;
     },
-    popper: function (target, popperId, arrow, placement) {
+    popper: function(target, popperId, arrow, placement) {
         window.blazorStrap.closeOtherPoppers(popperId);
         var reference = document.getElementById(target);
         var popper = document.getElementById(popperId);
@@ -142,15 +161,17 @@ window.blazorStrap = {
             window.blazorStrap.poppers.push(popperId);
         }
     },
-    tooltip: function (target, tooltip, arrow, placement) {
+    tooltip: function(target, tooltip, arrow, placement) {
         var instance;
         var reference = document.getElementById(target);
+
         function mouseoverHandler() {
             reference.removeEventListener("mouseover", mouseoverHandler);
             reference.addEventListener("mouseout", mouseoutHandler);
             tooltip.className = "tooltip fade show bs-tooltip-" + placement;
             instance = showPopper(reference, tooltip, arrow, placement);
         }
+
         function mouseoutHandler() {
             reference.removeEventListener("mouseout", mouseoutHandler);
             reference.addEventListener("mouseover", mouseoverHandler);
@@ -160,40 +181,60 @@ window.blazorStrap = {
                 instance = undefined;
             }
         }
+
         reference.addEventListener("mouseover", mouseoverHandler);
         return true;
     },
-    modelEscape: function (dotnetHelper) {
-        document.body.onkeydown = function (e) {
+    modelEscape: function(dotnetHelper) {
+        document.body.onkeydown = function(e) {
             if (e.key == "Escape") {
                 document.body.onkeydown = null;
                 dotnetHelper.invokeMethodAsync("OnEscape");
             }
         };
     },
-    focusElement: function (element) {
+    focusElement: function(element) {
         element.focus();
     },
+    addCollapsingEvent: function (element, show, dotNetObjectReference) {
+        var handler = function() {
+            if (element) {
+                element.style.height = "";
+                element.classList.remove("collapsing");
+                element.classList.add("collapse");
+                if (show) {
+                    element.classList.add("show");
+                } else {
+                    element.classList.remove("show");
+                }
+            }
+            element.removeEventListener('transitionend', handler, false);
+            dotNetObjectReference.invokeMethodAsync("AnimationEnd");
+        };
+        element.addEventListener('transitionend', handler , false);
+        return true;
+    },
     collapsingElement: function (element, show) {
         element.classList.remove("collapsing");
         element.classList.remove("collapse");
         var height = element.offsetHeight;
         element.classList.add("collapsing");
-
+   
         if (show) {
-            setTimeout(function () { element.style.height = height + "px"; }, 100)
+            setTimeout(function() { element.style.height = height + "px"; }, 100);
         }
         else {
             element.style.height = height + "px";
-            setTimeout(function () { element.style.height =""; }, 100)   
+            setTimeout(function() { element.style.height = ""; }, 100);
         }
         return true;
     },
-
     collapsingElementEnd: function (element) {
-        element.style.height = "";
-        element.classList.remove("collapsing");
-        element.classList.add("collapse");
+        if (element) {
+            element.style.height = "";
+            element.classList.remove("collapsing");
+            element.classList.add("collapse");
+        }
         return true;
     },
     setBootstrapCss: function (theme, version) {
@@ -209,6 +250,14 @@ window.blazorStrap = {
             link.href = "https://stackpath.bootstrapcdn.com/bootswatch/" + version + "/" + theme + "/bootstrap.min.css";
         }
         return true;
+    },
+    setPopper: function () {
+        if (typeof Popper === undefined || script === undefined) {
+            script = document.createElement('script');
+            document.head.insertBefore(script, document.head.lastChild);
+            script.src = "_content/BlazorStrap/popper.min.js";
+        }
+        return true;
     }
 };
 

docs/_content/BlazorStrap/css/cromefix.css

@@ -2,3 +2,12 @@
 div.modal-header > button.close:focus {
     outline: 0px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+    .collapsing {
+        transition: step-end !important;
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+}
+}

docs/_content/BlazorStrap/css/submenu.css.br

@@ -0,0 +1,2 @@
+k��v��C��%�J�����]�����]D.����v5H���s[�z��xJ�J�[����K:
+�u3��c�p�"�Ȟo���$S��B[Q+6&�
�F�t9#�M��i�ZN[��|�M�+�n)BŤ�]�!�{D�,��Q�l$��	�en�*�Y�cL)�hA�.��xC�6i�;d�

docs/_content/BlazorStrap/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"_content/SampleCore/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"_content/SampleCore/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

docs/_content/BlazorStrap/site.webmanifest.br

@@ -0,0 +1 @@
+,
 �q{�;K��Y$���~��7�*QL�Ql2�&�uX����@�<�v�-�o�A�$�.�ܜS�_+�����Q��ҿ{&t���i�}V.���/��=Cx ל�������xm0��Gh����4�;

docs/_content/SampleCore/site.webmanifest.br

@@ -0,0 +1 @@
+
 �q�;�i{6AnK}�s�UÃ��"<cjrZ����-4�����|<�d烡̝�8~XB�,�G���7g��ȏ�i���0�l��"*��3��u��1�e-Q��
���ܐ^C:

docs/_content/SampleCore/snippets/alerts/alerts6.html

@@ -0,0 +1,13 @@
+<BSAlert Color="Color.Info" @bind-IsOpen="isOpen" AutoHide="true" AutoHideDelay="5000">
+    I am an alert and I automatically close after 5 seconds!
+</BSAlert>
+<BSButton @onclick="@onclick">Show Alert</BSButton>
+
+@code {
+    private bool isOpen = false;
+
+    void onclick(MouseEventArgs e)
+    {
+        isOpen = true;
+    }
+}

docs/_content/SampleCore/snippets/badges/badges3.html.br

@@ -0,0 +1 @@
+�
����$b��p�h����;�P"��;E�wJ��00�
��(�,H&�Y�~����'+�0�m���F��U�C�m�恁|��©��CJr�g}r�"�) /2eKaT�+

docs/_content/SampleCore/snippets/buttongroups/buttongroups2.html.br

@@ -0,0 +1,2 @@
+�@�
+��c�B��k_S+$��k������C�܊������ٹ��S��
�?��=���ɦ�f7<�m�V|�����lUf>&���)��\$B˹C�O� �����\�m}

docs/_content/SampleCore/snippets/buttongroups/buttongroups3.html.br

@@ -0,0 +1 @@
+�
@�vL�B��kK��0�.y\@j��^��v��_[dm�r�-?A�oJ)�K��W��X�	�����&QZw��aQ�E�h����@�/i�9̓^����<���

docs/_content/SampleCore/snippets/buttons/buttons1.html.br

@@ -0,0 +1,3 @@
+�
H�v�d�]g�}0�
+�z�ԭ�'�	Ƅ��oM����B�Zu���l&(E�	Q�s�
f�{��Y�M�����	+�Z@Xl�ǃ��Q��F�$
+t���I9K�[SX�-#�n�Wo7U�]\�2��������

docs/_content/SampleCore/snippets/buttons/buttons3.html.br

@@ -0,0 +1 @@
+<
`��k�8��0{o����>"<#k��\���梡v�!�Q^��O��x;����×�Ǿ�DTl��i���f����P��#��c�gƙ.�`�Ig�N

docs/_content/SampleCore/snippets/buttons/buttons4.html.br

@@ -0,0 +1,2 @@
+�nL7H���=�
+�v�ԭ�	��B��|���_ȶ��� ��b5�YI�&>buw)�"�<lǪ׋h�Or����UkLGp-�/� Y����QX�_J����;�O���G�^�����J}�����

docs/_content/SampleCore/snippets/cards/cards6.html.br

@@ -0,0 +1,2 @@
+ ,�f�ϴ#�X2Q�Z8�t�-yޝrh����ᮇșn.�aw���=��±����^�Y�����<D���V�����,'�gˌKB��{��"�	��B
gE�4� Mm�Gݽ`���P�Pa�\Gc����1��>�/��DG�?�<�j��I���^
+{�B�`橻�8v��I�>�����}2$�E�D�i=_v�^�1

docs/_content/SampleCore/snippets/carousels/carousels1.html

@@ -40,4 +40,9 @@
         public string Caption { get; set; }
         public string Header { get; set; }
     }
+
+    private void indexChanged(int index)
+    {
+        Console.WriteLine("Index Changed: " + index);
+    }
 }

docs/_content/SampleCore/snippets/dropdowns/dropdowns10.html.br

@@ -0,0 +1,2 @@
+L
��vsr�\'z�WZ	��Pһ���Q����25G7rNA�
+O����tmg�G���I��6�Z��#�hZu
qv����Aj-�2d���-`�c"�z���Ax ��b_9

docs/_content/SampleCore/snippets/dropdowns/dropdowns12.html.br

@@ -0,0 +1,2 @@
+�
 ��w@4����Z3g�V��{�<; ���/B���>drPn�Xӡ
+C��T��`q᝛�sN*�Lvt�u�3|U��Nc=Q�8���E���xH�ՎMiC��=c���e��ޛ�@w{Y/G^m�,

docs/_content/SampleCore/snippets/dropdowns/dropdowns17.html.br

@@ -0,0 +1 @@
+�
@�v��И���rEU+4���Ց��n�Q��o_��
by�JR}����(���v))%�m�ݪ�aIذ�yX��@��u�N��*�(p"ש�K�W���6`��l3-7|��`�sDĘh8��jm�H��T�@/����-�

docs/_content/SampleCore/snippets/dropdowns/dropdowns8.html.br

@@ -0,0 +1,2 @@
+|
`��{$����Vh{n�T
+c]F����_u[�q��[6��,DKK�6�StL�5m��Ae�.)'���!pBJ�T�JMxb4��{
�G����T}�H�!��b��C�CQ��@G:�".5

docs/_content/SampleCore/snippets/dropdowns/dropdowns9.html.br

@@ -0,0 +1,4 @@
+H
 ,
+�fb!��j5�h��
+���d�'I���K�PO��ѱ��܍b�U	��ۯ��rR2,���Ï��,�=��T�k�!��ՋϨ�a����
�{���
+�@u	�g���$q