fit-ui 2.5.3 → 2.5.4

package/dist/Fit.UI.js

@@ -648,7 +648,7 @@ Fit._internal =
 {
 	Core:
 	{
-		VersionInfo: { Major: 2, Minor: 5, Patch: 3 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
+		VersionInfo: { Major: 2, Minor: 5, Patch: 4 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
 	}
 };
 
@@ -17487,6 +17487,13 @@ Fit.Controls.DropDown = function(ctlId)
 		}
 	}
 
+	// Focus input field on mobile and keep it focused, even if DropDown was opened using arrow icon
+	this._internal.ForceFocusMobile = function()
+	{
+		focusInputOnMobile = true;
+		focusInput(txtPrimary);
+	}
+
 	// ============================================
 	// Private
 	// ============================================
@@ -19179,6 +19186,9 @@ Fit.Controls.WSDropDown = function(ctlId)
 	var useActionMenu = false;
 	var useActionMenuForced = false;
 	var useActionMenuAfterLoad = true;
+	var treeViewEnabled = true;
+	var orgPlaceholder = this.Placeholder;
+	var customPlaceholderSet = false;
 	var translations = null;
 
 	var onRequestHandlers = [];
@@ -19523,21 +19533,29 @@ Fit.Controls.WSDropDown = function(ctlId)
 			// Do not show action menu if the only option available is ShowAll.
 			// In this case the user will not be able to select SeachMore, and
 			// there is no selected items that can be removed from the control.
-			var onlyShowAllOptionDisplayedInActionMenu = actionMenu.GetItems().length === 1 && actionMenu.HasItem("ShowAll") === true;
+			// In this case we ignore useActionMenu === true, even when useActionMenuForced is true.
+			var onlyTheShowAllOptionIsDisplayedInActionMenu = actionMenu.GetItems().length === 1 && actionMenu.HasItem("ShowAll") === true;
 
-			if (useActionMenu === true && onlyShowAllOptionDisplayedInActionMenu === false)
+			if (useActionMenu === true && onlyTheShowAllOptionIsDisplayedInActionMenu === false)
 			{
 				me.SetPicker(actionMenu);
 			}
 			else
 			{
-				if (onlyShowAllOptionDisplayedInActionMenu === true)
+				if (onlyTheShowAllOptionIsDisplayedInActionMenu === true)
 				{
 					useActionMenuAfterLoad = false;
 				}
 
-				me.SetPicker(tree);
-				ensureTreeViewData();
+				if (treeViewEnabled === true)
+				{
+					me.SetPicker(tree);
+					ensureTreeViewData();
+				}
+				else
+				{
+					list.RemoveItems(); // Do not show previous search results again
+				}
 			}
 		});
 
@@ -19771,12 +19789,98 @@ Fit.Controls.WSDropDown = function(ctlId)
 		if (Fit.Validation.IsSet(val) === true && base() !== val)
 		{
 			base(val);
-			updateActionMenu(); // Update action menu to have SearchMore action added/removed depending on whether input is allowed or not
+			localize(); // Add/remove placeholder depending on whether input is enabled or not - also calls updateActionMenu() which will make sure SearchMore action is added/removed depending on whether input is enabled or not
+
+			if (val === false && me.GetPicker() === list)
+			{
+				me.SetPicker(null); // Which picker to use is decided in the OnOpen handler
+			}
 		}
 
 		return base();
 	});
 
+	/// <function container="Fit.Controls.WSDropDown" name="TreeViewEnabled" access="public" returns="boolean">
+	/// 	<description> Get/set value indicating whether TreeView control is enabled or not </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, True enables TreeView (default), False disables it </param>
+	/// </function>
+	this.TreeViewEnabled = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true && val !== treeViewEnabled)
+		{
+			treeViewEnabled = val;
+
+			if (useActionMenuForced === false)
+			{
+				// Use action menu if there is no data to display
+
+				if (val === true)
+				{
+					useActionMenu = nodesPopulated === false || tree.GetChildren().length === 0;
+				}
+				else
+				{
+					useActionMenu = true; // User must search to retrieve available options
+				}
+			}
+
+			if (val === false && me.GetPicker() === tree)
+			{
+				me.SetPicker(null); // Which picker to use is decided in the OnOpen handler
+			}
+
+			updateActionMenu(); // Update action menu to have ShowAll action added/removed depending on whether TreeView is enabled or not
+		}
+
+		return treeViewEnabled;
+	}
+
+	/// <function container="Fit.Controls.WSDropDown" name="ListViewEnabled" access="public" returns="boolean">
+	/// 	<description>
+	/// 		Get/set flag indicating whether searchable ListView is enabled or not.
+	/// 		The value provided also determines the value for InputEnabled and vice versa.
+	/// 	</description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, True enables ListView and search capability (default), False disables it </param>
+	/// </function>
+	this.ListViewEnabled = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+		return me.InputEnabled(val);
+	}
+
+	this.Placeholder = function(val)
+	{
+		Fit.Validation.ExpectString(val, true);
+
+		customPlaceholderSet = true;
+		return orgPlaceholder(val);
+	}
+
+	this.OpenDropDown = Fit.Core.CreateOverride(this.OpenDropDown, function()
+	{
+		if (me.InputEnabled() === true && me.GetInputValue() === "" && me.GetSelections().length === 0 && treeViewEnabled === false)
+		{
+			// Do not open DropDown - it will only contain "Search for more options"
+			// when no items are currently selected and TreeView is disabled, and no
+			// search value has been entered yet.
+			// The control will display "Search.." (or a custom placeholder), making it
+			// obvious what the user need to do to get data - no need to display the action menu.
+
+			if (Fit.Browser.GetInfo().IsMobile === true)
+			{
+				// Focus input on mobile, even if DropDown was opened using
+				// the arrow icon - this will bring up the virtual keyboard.
+				this._internal.ForceFocusMobile();
+			}
+
+			return;
+		}
+
+		base();
+	});
+
 	/// <function container="Fit.Controls.WSDropDown" name="GetListView" access="public" returns="Fit.Controls.WSListView">
 	/// 	<description> Get WSListView control used to display data in a flat list view </description>
 	/// </function>
@@ -19794,7 +19898,21 @@ Fit.Controls.WSDropDown = function(ctlId)
 	}
 
 	/// <function container="Fit.Controls.WSDropDown" name="UseActionMenu" access="public">
-	/// 	<description> Get/set value indicating whether control uses the built-in action menu to ease addition and removal of items </description>
+	/// 	<description>
+	/// 		Get/set value indicating whether control uses the built-in action menu to ease addition and removal of items.
+	/// 		If this property is not explicitly set, it will automatically be changed by the control depending on data and other settings.
+	/// 		The action menu will be enabled if TreeViewEnabled is set to False, as it would otherwise not show anything unless the user
+	/// 		enters a search value. If TreeViewEnabled is True but no data is provided to the TreeView control upon request, the action menu
+	/// 		is also enabled.
+	/// 		If the control does not have any selections, InputEnabled (or its alias ListViewEnabled) is True, and TreeViewEnabled is False,
+	/// 		no picker will be displayed since the action menu would only display the &quot;Search for options&quot; item - but it should already
+	/// 		be obvious to the user that searching is required due to the placeholder displaying &quot;Search..&quot; by default.
+	/// 		Likewise, if TreeViewEnabled is True and InputEnabled (or its alias ListViewEnabled) is False, and no selections are made,
+	/// 		the action menu would only display &quot;Show available options&quot;. In this case the TreeView will be displayed instead,
+	/// 		even if UseActionMenu has explicitely been set to True.
+	/// 		The behaviour described is in place to make sure the action menu is only displayed when it makes sense, since it introduces
+	/// 		and extra step (click) required by the user to access data.
+	/// 	</description>
 	/// 	<param name="val" type="boolean" default="undefined"> If defined, True enables the action menu, False disables it </param>
 	/// </function>
 	this.UseActionMenu = function(val)
@@ -19844,7 +19962,7 @@ Fit.Controls.WSDropDown = function(ctlId)
 
 		Fit.Internationalization.RemoveOnLocaleChanged(localize);
 
-		me = list = tree = actionMenu = search = forceNewSearch = hideLinesForFlatData = dataRequested = dataLoading = nodesPopulated = requestCount = onDataLoadedCallback = suppressTreeOnOpen = timeOut = currentRequest = classes = autoUpdatedSelections = useActionMenu = useActionMenuForced = useActionMenuAfterLoad = translations = onRequestHandlers = onResponseHandlers = null;
+		me = list = tree = actionMenu = search = forceNewSearch = hideLinesForFlatData = dataRequested = dataLoading = nodesPopulated = requestCount = onDataLoadedCallback = suppressTreeOnOpen = timeOut = currentRequest = classes = autoUpdatedSelections = useActionMenu = useActionMenuForced = useActionMenuAfterLoad = treeViewEnabled = orgPlaceholder = customPlaceholderSet = translations = onRequestHandlers = onResponseHandlers = null;
 
 		base();
 	});
@@ -20057,13 +20175,16 @@ Fit.Controls.WSDropDown = function(ctlId)
 			actionMenu.AddItem(searchIcon + translations.SearchMore, "SearchMore");
 		}
 
-		if (nodesPopulated === false || tree.GetChildren().length > 0)
+		if (treeViewEnabled === true)
 		{
-			actionMenu.AddItem(showAllIcon + translations.ShowAllOptions, "ShowAll");
-		}
-		else //if (nodesPopulated === true && tree.GetChildren().length === 0)
-		{
-			actionMenu.AddItem(showAllIcon + "<i>" + translations.NoneAvailable + ": " + translations.ShowAllOptions + "</i>", "ShowAllNoneFound");
+			if (nodesPopulated === false || tree.GetChildren().length > 0)
+			{
+				actionMenu.AddItem(showAllIcon + translations.ShowAllOptions, "ShowAll");
+			}
+			else //if (nodesPopulated === true && tree.GetChildren().length === 0)
+			{
+				actionMenu.AddItem(showAllIcon + "<i>" + translations.NoneAvailable + ": " + translations.ShowAllOptions + "</i>", "ShowAllNoneFound");
+			}
 		}
 
 		if (addRemoveAll === true)
@@ -20083,6 +20204,11 @@ Fit.Controls.WSDropDown = function(ctlId)
 		translations = locale.Translations;
 
 		updateActionMenu();
+
+		if (customPlaceholderSet === false)
+		{
+			orgPlaceholder(me.InputEnabled() === true ? translations.Search : "");
+		}
 	}
 
 	function onDataLoaded(cb)
@@ -20169,11 +20295,13 @@ Fit.Controls.WSDropDown = function(ctlId)
 			{
 				InvalidSelection		: "Invalid selection",
 
-				SearchMore				: "Search for more options",
-				ShowAllOptions			: "Show all available options",
+				// WSDropDown
+				Search					: "Search..",
+				SearchMore				: "Search for options",
+				ShowAllOptions			: "Show available options",
 				RemoveAll				: "Remove all selected",
 				Remove					: "Remove",
-				NoneAvailable			: "None available"
+				NoneAvailable			: "The list is empty"
 			}
 		},
 		"da":
@@ -20182,11 +20310,13 @@ Fit.Controls.WSDropDown = function(ctlId)
 			{
 				InvalidSelection		: "Ugyldigt valg",
 
-				SearchMore				: "Søg efter flere valgmuligheder",
-				ShowAllOptions			: "Vis alle tilgængelige valgmuligheder",
+				// WSDropDown
+				Search					: "Søg..",
+				SearchMore				: "Søg efter valgmuligheder",
+				ShowAllOptions			: "Vis tilgængelige valgmuligheder",
 				RemoveAll				: "Fjern alle valgte",
 				Remove					: "Fjern",
-				NoneAvailable			: "Ingen tilgængelige"
+				NoneAvailable			: "Listen er tom"
 			}
 		},
 		"de":
@@ -20195,11 +20325,13 @@ Fit.Controls.WSDropDown = function(ctlId)
 			{
 				InvalidSelection		: "Ungültige Auswahl",
 
-				SearchMore				: "Nach weiteren Optionen suchen",
-				ShowAllOptions			: "Alle verfügbaren Optionen anzeigen",
+				// WSDropDown
+				Search					: "Suchen..",
+				SearchMore				: "Nach Optionen suchen",
+				ShowAllOptions			: "Verfügbare Optionen anzeigen",
 				RemoveAll				: "Alle ausgewählten entfernen",
 				Remove					: "Entfernen",
-				NoneAvailable			: "Keine verfügbar"
+				NoneAvailable			: "Die Liste ist leer"
 			}
 		}
 	}