Deploying to gh-pages from @ b655ff3 🚀

_content/Blazorise/blazorise.css

@@ -123,7 +123,7 @@ hr.divider.divider-text::before {
 .b-file-picker .b-file-picker-file span {
   display: block;
 }
-.b-file-picker .b-file-picker-file .b-file-picker-file-size, .b-file-picker .b-file-picker-file .b-file-picker-file-status {
+.b-file-picker .b-file-picker-file .b-file-picker-file-size, .b-file-picker .b-file-picker-file .b-file-picker-file-status, .b-file-picker .b-file-picker-file .b-file-picker-file-relativepath {
   font-size: 0.75rem;
 }
 
@@ -525,6 +525,16 @@ hr.divider.divider-text::before {
   padding-top: 1rem;
   display: block;
 }
+.b-bar-vertical-inline .b-bar-end .b-bar-dropdown,
+.b-bar-vertical-popout .b-bar-end .b-bar-dropdown,
+.b-bar-vertical-small .b-bar-end .b-bar-dropdown {
+  position: relative;
+}
+.b-bar-vertical-inline .b-bar-end .b-bar-dropdown-menu-container,
+.b-bar-vertical-popout .b-bar-end .b-bar-dropdown-menu-container,
+.b-bar-vertical-small .b-bar-end .b-bar-dropdown-menu-container {
+  bottom: 0;
+}
 .b-bar-vertical-inline .b-bar-link,
 .b-bar-vertical-popout .b-bar-link,
 .b-bar-vertical-small .b-bar-link {
@@ -859,15 +869,15 @@ hr.divider.divider-text::before {
   transition: transform 200ms ease-out;
   float: right;
   position: relative;
-  -webkit-transform: rotate(315deg);
-  transform: rotate(315deg);
+  -webkit-transform: rotate(135deg);
+  transform: rotate(135deg);
+  right: 0.8rem;
 }
 .b-bar-vertical-small .b-bar-dropdown .b-bar-dropdown-menu-container .b-bar-dropdown-menu > .b-bar-dropdown:not([data-visible=true]) .b-bar-dropdown-toggle:before,
 .b-bar-vertical-inline[data-collapse=small] .b-bar-dropdown .b-bar-dropdown-menu-container .b-bar-dropdown-menu > .b-bar-dropdown:not([data-visible=true]) .b-bar-dropdown-toggle:before,
 .b-bar-vertical-popout[data-collapse=small] .b-bar-dropdown .b-bar-dropdown-menu-container .b-bar-dropdown-menu > .b-bar-dropdown:not([data-visible=true]) .b-bar-dropdown-toggle:before {
-  -webkit-transform: rotate(135deg);
-  transform: rotate(135deg);
-  right: 0.8rem;
+  -webkit-transform: rotate(315deg);
+  transform: rotate(315deg);
 }
 @keyframes b-bar-link-small {
   to {
@@ -932,14 +942,14 @@ hr.divider.divider-text::before {
   transition: transform 200ms ease-out;
   float: right;
   position: relative;
-  -webkit-transform: rotate(315deg);
-  transform: rotate(315deg);
-}
-.b-bar-vertical-popout:not([data-collapse]) .b-bar-dropdown:not([data-visible=true]) .b-bar-dropdown-toggle:before {
   -webkit-transform: rotate(135deg);
   transform: rotate(135deg);
   right: 0.8rem;
 }
+.b-bar-vertical-popout:not([data-collapse]) .b-bar-dropdown:not([data-visible=true]) .b-bar-dropdown-toggle:before {
+  -webkit-transform: rotate(315deg);
+  transform: rotate(315deg);
+}
 .b-bar-vertical-popout:not([data-collapse]) .b-bar-dropdown .b-bar-dropdown-menu-container {
   z-index: 100;
   max-height: 50vh;
@@ -1221,7 +1231,7 @@ thead tr th {
 
 .flatpickr-wrapper {
   position: relative;
-  display: inline-block;
+  display: contents;
 }
 
 .flatpickr-months {

_content/Blazorise/button.js

@@ -1,4 +1,4 @@
-import { getRequiredElement } from "./utilities.js?v=1.1.5.0";
+import { getRequiredElement } from "./utilities.js?v=1.3.2.0";
 
 const _instances = [];
 

_content/Blazorise/closable.js

@@ -37,7 +37,7 @@ function findClosableComponentIndex(elementId) {
 
     for (index = 0; index < closableComponents.length; ++index) {
         if (closableComponents[index].elementId === elementId)
-            return closableComponents[index];
+            return index;
     }
 
     return null;
@@ -48,7 +48,7 @@ function findClosableLightComponentIndex(elementId) {
 
     for (index = 0; index < closableLightComponents.length; ++index) {
         if (closableLightComponents[index].elementId === elementId)
-            return closableLightComponents[index];
+            return index;
     }
 
     return null;
@@ -80,6 +80,14 @@ function hasParentInTree(element, parentElementId) {
     return hasParentInTree(element.parentElement, parentElementId);
 }
 
+function hasScroll(element) {
+    return element.scrollHeight > element.clientHeight;
+}
+
+function scrollClick(event) {
+    return hasScroll(event.target) && event.target.clientWidth < event.clientX;
+}
+
 export function registerClosableComponent(dotnetAdapter, element) {
     if (element) {
         if (isClosableComponent(element.id) !== true) {
@@ -125,12 +133,15 @@ document.addEventListener('mouseup', function handler(evt) {
 
     if (evt.button === 0 && evt.target === lastClickedDocumentElement && closableComponents && closableComponents.length > 0) {
         const lastClosable = closableComponents[closableComponents.length - 1];
-        if (lastClosable) {
+        const scrollClicked = scrollClick(evt);
+        if (lastClosable && !scrollClicked) {
             tryClose(lastClosable, evt.target.id, false, hasParentInTree(evt.target, lastClosable.elementId));
         }
     }
 });
 
+
+
 document.addEventListener('keyup', function handler(evt) {
     if (isClosableLightComponent(evt.target.id))
         return;

_content/Blazorise/colorPicker.js

@@ -1,5 +1,5 @@
-import "./vendors/Pickr.js?v=1.1.5.0";
-import * as utilities from "./utilities.js?v=1.1.5.0";
+import "./vendors/Pickr.js?v=1.3.2.0";
+import * as utilities from "./utilities.js?v=1.3.2.0";
 
 const _instancesInfos = [];
 

_content/Blazorise/datePicker.js

@@ -1,9 +1,9 @@
-import "./vendors/flatpickr.js?v=1.1.5.0";
-import * as utilities from "./utilities.js?v=1.1.5.0";
+import "./vendors/flatpickr.js?v=1.3.2.0";
+import * as utilities from "./utilities.js?v=1.3.2.0";
 
 const _pickers = [];
 
-export function initialize(element, elementId, options) {
+export function initialize(dotnetAdapter, element, elementId, options) {
     element = utilities.getRequiredElement(element, elementId);
 
     if (!element)
@@ -52,7 +52,8 @@ export function initialize(element, elementId, options) {
         clickOpens: !(options.readOnly || false),
         disable: options.disabledDates || [],
         inline: options.inline || false,
-        disableMobile: true
+        disableMobile: options.disableMobile || true,
+        static: options.staticPicker
     };
 
     if (options.selectionMode)
@@ -68,19 +69,104 @@ export function initialize(element, elementId, options) {
 
     const picker = flatpickr(element, Object.assign({}, defaultOptions, pluginOptions));
 
+    picker.altInput.dotnetAdapter = dotnetAdapter;
+
     if (options) {
         picker.altInput.disabled = options.disabled || false;
         picker.altInput.readOnly = options.readOnly || false;
+        picker.altInput.placeholder = utilities.coalesce(options.placeholder, "");
+
+        picker.altInput.addEventListener("blur", (e) => {
+            const isInput = e.target === picker._input;
+
+            // Workaround for: onchange does not fire when user writes the time and then click outside of the input area.
+            if (isInput && picker.isOpen === false) {
+                picker.input.dispatchEvent(utilities.createEvent("change"));
+                picker.input.dispatchEvent(utilities.createEvent("input"));
+            }
+        });
     }
 
+    picker.customOptions = {
+        inputMode: options.inputMode
+    };
+
+    attachEventHandlers(picker.altInput);
+
     _pickers[elementId] = picker;
 }
 
+function attachEventHandlers(picker) {
+    picker.addEventListener("keydown", keyDownHandler);
+    picker.addEventListener("keyup", keyUpHandler);
+    picker.addEventListener("focus", focusHandler);
+    picker.addEventListener("focusin", focusInHandler);
+    picker.addEventListener("focusout", focusOutHandler);
+    picker.addEventListener("keypress", keyPressHandler);
+    picker.addEventListener("blur", blurHandler);
+}
+
+function removeEventHandlers(picker) {
+    picker.removeEventListener("keydown", keyDownHandler);
+    picker.removeEventListener("keyup", keyUpHandler);
+    picker.removeEventListener("focus", focusHandler);
+    picker.removeEventListener("focusin", focusInHandler);
+    picker.removeEventListener("focusout", focusOutHandler);
+    picker.removeEventListener("keypress", keyPressHandler);
+    picker.removeEventListener("blur", blurHandler);
+}
+
+function keyDownHandler(e) {
+    if (e.target.dotnetAdapter) {
+        e.target.dotnetAdapter.invokeMethodAsync("OnKeyDownHandler", e);
+    }
+}
+
+function keyUpHandler(e) {
+    if (e.target.dotnetAdapter) {
+        e.target.dotnetAdapter.invokeMethodAsync("OnKeyUpHandler", e);
+    }
+}
+
+function focusHandler(e) {
+    if (e.target.dotnetAdapter) {
+        e.target.dotnetAdapter.invokeMethodAsync("OnFocusHandler", e);
+    }
+}
+
+function focusInHandler(e) {
+    if (e.target.dotnetAdapter) {
+        e.target.dotnetAdapter.invokeMethodAsync("OnFocusInHandler", e);
+    }
+}
+
+function focusOutHandler(e) {
+    if (e.target.dotnetAdapter) {
+        e.target.dotnetAdapter.invokeMethodAsync("OnFocusOutHandler", e);
+    }
+}
+
+function keyPressHandler(e) {
+    if (e.target.dotnetAdapter) {
+        e.target.dotnetAdapter.invokeMethodAsync("OnKeyPressHandler", e);
+    }
+}
+
+function blurHandler(e) {
+    if (e.target.dotnetAdapter) {
+        e.target.dotnetAdapter.invokeMethodAsync("OnBlurHandler", e);
+    }
+}
+
 export function destroy(element, elementId) {
     const instances = _pickers || {};
 
     const instance = instances[elementId];
 
+    if (instance && instance.altInput) {
+        removeEventHandlers(instance.altInput);
+    }
+
     if (instance) {
         instance.destroy();
     }
@@ -93,6 +179,12 @@ export function updateValue(element, elementId, value) {
 
     if (picker) {
         picker.setDate(value);
+
+        // workaround for https://github.com/flatpickr/flatpickr/issues/2861
+        if (picker.customOptions && picker.customOptions.inputMode === 2 && picker.nextMonthNav) {
+            picker.nextMonthNav.click();
+            picker.jumpToDate(value, false);
+        }
     }
 }
 
@@ -140,6 +232,18 @@ export function updateOptions(element, elementId, options) {
         if (options.inline.changed) {
             picker.set("inline", options.inline.value || false);
         }
+
+        if (options.disableMobile.changed) {
+            picker.set("disableMobile", options.disableMobile.value || true);
+        }
+
+        if (options.placeholder.changed) {
+            picker.altInput.placeholder = options.placeholder.value;
+        }
+
+        if (options.staticPicker.changed) {
+            picker.set("static", options.staticPicker.value);
+        }
     }
 }
 
@@ -177,6 +281,7 @@ export function updateLocalization(element, elementId, localization) {
             picker.l10n.months = localization.months;
             picker.l10n.weekdays = localization.weekdays;
             picker.l10n.amPM = localization.amPM;
+            picker.l10n.rangeSeparator = localization.rangeSeparator;
         }
 
         if (picker.weekdayContainer) {

_content/Blazorise/dragDrop.js

@@ -1,4 +1,4 @@
-import { getRequiredElement } from "./utilities.js?v=1.1.5.0";
+import { getRequiredElement } from "./utilities.js?v=1.3.2.0";
 
 export function initialize(element, elementId) {
     element = getRequiredElement(element, elementId);
@@ -20,10 +20,64 @@ export function destroy(element, elementId) {
     element.removeEventListener('dragstart', dragStartHandler);
 }
 
+export function initializeThrottledDragEvents(element, elementId, dotnetAdapter) {
+    element = getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
+    element.dotnetAdapter = dotnetAdapter;
+    element.timeOutForDrag = null;
+    element.timeOutForDragOver = null;
+
+    element.addEventListener('drag', throttledDragHandler);
+    element.addEventListener('dragover', throttledDragOverHandler);
+}
+
+export function destroyThrottledDragEvents(element, elementId) {
+    element = getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
+    if (typeof throttledDragHandler === "function") {
+        element.removeEventListener("drag", throttledDragHandler);
+    }
+
+    if (typeof throttledDragOverHandler === "function") {
+        element.removeEventListener("dragover", throttledDragOverHandler);
+    }
+}
+
 function dragOverHandler(e) {
     e.preventDefault();
 }
 
 function dragStartHandler(e) {
     e.dataTransfer.setData('', e.target.id);
+}
+
+function throttledDragHandler(e) {
+    e.preventDefault();
+
+    if (e.target && !e.target.timeOutForDrag) {
+        e.target.timeOutForDrag = setTimeout(function () {
+            e.target.timeOutForDrag = null;
+            if (e.target.dotnetAdapter) {
+                e.target.dotnetAdapter.invokeMethodAsync("OnDragHandler", e);
+            }
+        }.bind(this), 250);
+    }
+}
+
+function throttledDragOverHandler(e) {
+    e.preventDefault();
+    if (e.target && !e.target.timeOutForDragOver) {
+        e.target.timeOutForDragOver = setTimeout(function () {
+            e.target.timeOutForDragOver = null;
+            if (e.target.dotnetAdapter) {
+                e.target.dotnetAdapter.invokeMethodAsync("OnDragOverHandler", e);
+            }
+        }.bind(this), 250);
+    }
 }