fit-ui 2.5.2 → 2.5.6

package/dist/Fit.UI.js

@@ -648,7 +648,7 @@ Fit._internal =
 {
 	Core:
 	{
-		VersionInfo: { Major: 2, Minor: 5, Patch: 2 } // 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: 6 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
 	}
 };
 
@@ -4281,6 +4281,7 @@ Fit.Controls.ControlBase = function(controlId)
 
 		var onChangeHandler = me._internal.FireOnChange;
 		me._internal.FireOnChange = function() {};
+		me._internal.FireOnChangeSuppressed = true; // Allow specialized controls to detect when OnChange event will be suppressed for performance optimizations
 
 		var error = null;
 
@@ -4294,10 +4295,12 @@ Fit.Controls.ControlBase = function(controlId)
 		}
 
 		me._internal.FireOnChange = onChangeHandler;
+		me._internal.FireOnChangeSuppressed = false;
 
 		if (error !== null)
 			Fit.Validation.ThrowError(error);
 	}
+	this._internal.FireOnChangeSuppressed = false;
 
 	this._internal.Data = function(key, val)
 	{
@@ -15795,6 +15798,7 @@ Fit.Controls.DropDown = function(ctlId)
 	var detectBoundariesRelToViewPort = false;	// Flag indicating whether drop down menu should be positioned relative to viewport (true) or scroll parent (false)
 	var persistView = false;					// Flag indicating whether picker controls should remember and restore its scroll position and highlighted item when reopened
 	var highlightFirst = false;					// Flag indicating whether picker controls should focus its first node automatically when opened
+	var searchModeOnFocus = false;				// Flag indicating whether control goes into search mode when it is focused (search mode clears input field and displays "search.." placeholder)
 
 	var onInputChangedHandlers = [];			// Invoked when input value is changed - takes two arguments (sender (this), text value)
 	var onPasteHandlers = [];					// Invoked when a value is pasted - takes two arguments (sender (this), text value)
@@ -16040,6 +16044,53 @@ Fit.Controls.DropDown = function(ctlId)
 			}
 		});
 
+		// Support for SearchModeOnFocus
+
+		me.OnFocus(function(sender)
+		{
+			if (searchModeOnFocus === true)
+			{
+				searchModeOnFocus = false; // Temporarily disable searchModeOnFocus to allow setInputEditing(..) (which is called by ClearInputForSearch(..)) to change editing state for txtPrimary
+				me._internal.ClearInputForSearch(true); // True = keep DropDown open - do not auto close it
+				searchModeOnFocus = true;
+			}
+		});
+
+		me.OnBlur(function()
+		{
+			if (searchModeOnFocus === true)
+			{
+				searchModeOnFocus = false; // Temporarily disable searchModeOnFocus to allow setInputEditing(..) to change editing state for txtPrimary
+				me._internal.UndoClearInputForSearch();
+				searchModeOnFocus = true;
+			}
+		});
+
+		me.OnChange(function()
+		{
+			// Determine whether value was changed by user or programmatically,
+			// so placeholder is not set when value is assigned programmatically.
+			// Control might not be focused on mobile if opened using arrow icon.
+			// In this case we simply use the DropDown's opened state instead.
+			var controlIsActive = me.Focused() === true || me.IsDropDownOpen() === true;
+
+			if (searchModeOnFocus === true && controlIsActive === true)
+			{
+				if (me.GetSelections().length === 0)
+				{
+					// DropDown has a synthetic placeholder which is displayed
+					// when no items are selected. Remove placeholder from input
+					// field so we do not get two placeholders on top of each other.
+					txtPrimary.placeholder = "";
+				}
+				else
+				{
+					// Display placeholder in input field when items are selected
+					txtPrimary.placeholder = me.Placeholder();
+				}
+			}
+		});
+
 		// PickerBase - make picker aware of focused state of host control
 
 		me.OnFocus(function()
@@ -16270,7 +16321,7 @@ Fit.Controls.DropDown = function(ctlId)
 			itemDropZones[key].Dispose();
 		});
 
-		me = itemContainer = itemCollection = itemDropZones = arrow = txtPrimary = txtActive = txtEnabled = dropDownMenu = picker = orgSelections = invalidMessage = invalidMessageChanged = initialFocus = maxHeight = prevValue = focusAssigned = closeHandlers = dropZone = isMobile = focusInputOnMobile = detectBoundaries = detectBoundariesRelToViewPort = persistView = highlightFirst = onInputChangedHandlers = onPasteHandlers = onOpenHandlers = onCloseHandlers = suppressUpdateItemSelectionState = suppressOnItemSelectionChanged = clearTextSelectionOnInputChange = prevTextSelection = textSelectionCallback = cmdToggleTextMode = null;
+		me = itemContainer = itemCollection = itemDropZones = arrow = txtPrimary = txtActive = txtEnabled = dropDownMenu = picker = orgSelections = invalidMessage = invalidMessageChanged = initialFocus = maxHeight = prevValue = focusAssigned = closeHandlers = dropZone = isMobile = focusInputOnMobile = detectBoundaries = detectBoundariesRelToViewPort = persistView = highlightFirst = searchModeOnFocus = onInputChangedHandlers = onPasteHandlers = onOpenHandlers = onCloseHandlers = suppressUpdateItemSelectionState = suppressOnItemSelectionChanged = clearTextSelectionOnInputChange = prevTextSelection = textSelectionCallback = cmdToggleTextMode = null;
 
 		base();
 	});
@@ -17261,9 +17312,30 @@ Fit.Controls.DropDown = function(ctlId)
 		if (Fit._internal.DropDown.Current !== null && Fit._internal.DropDown.Current !== me)
 			Fit._internal.DropDown.Current.CloseDropDown();
 
-		if (txtActive === txtPrimary && me.GetInputValue() === "")
+		if (searchModeOnFocus === false && me.TextSelectionMode() === false && txtActive === txtPrimary && me.GetInputValue() === "")
 		{
-			me._internal.UndoClearInputForSearch();
+			// Visual Selection Mode with SearchModeOnFocus (which keeps txtPrimary locked in place) disabled:
+
+			// When placing the control in search mode temporarily (not "locked" by
+			// SearchModeOnFocus) via me._internal.ClearInputForSearch() or by entering a value
+			// in txtPrimary, the input control "word wraps" to a new line. When it lose focus,
+			// it returns to its normal position if it is empty.
+			// In Visual Selection Mode with SearchModeOnFocus disabled this poses a problem
+			// since interacting with the picker control results in the input control losing
+			// focus.
+			// So, if the user clicks on an item in the picker control while the control
+			// is temporarily in search mode (remember, SearchModeOnFocus is not enabled),
+			// txtPrimary lose focus, the control's height is changed because the input
+			// control returns to its normal position (it no longer "word wraps"), the picker
+			// control moves up, and the mouse button is released on another element than the
+			// one the user initially clicked on.
+			// OnClick does not fire unless the mouse button is clicked and released
+			// on the same element. So in this situation the picker control would not cause
+			// the given item to be selected. The user would have to try again.
+			// To avoid this, we exit search mode to force txtPrimary back into place when
+			// re-opening the DropDown control.
+
+			me._internal.UndoClearInputForSearch(); // Undo/exit search mode to return txtPrimary to its normal position
 		}
 
 		// Do this before displaying drop down to prevent dropdown with position:absolute
@@ -17446,8 +17518,10 @@ Fit.Controls.DropDown = function(ctlId)
 
 	this._internal = (this._internal ? this._internal : {});
 
-	this._internal.ClearInputForSearch = function()
+	this._internal.ClearInputForSearch = function(keepDropDownOpen) // Put input in search mode
 	{
+		Fit.Validation.ExpectBoolean(keepDropDownOpen, true);
+
 		if (me.TextSelectionMode() === true)
 		{
 			forceFocusInput(txtPrimary);
@@ -17471,10 +17545,13 @@ Fit.Controls.DropDown = function(ctlId)
 		// event to register interactions, which doesn't fire unless the mouse button is released
 		// on the same object it was pressed down on. We avoid this by closing the control.
 		// We close it in both Text Selection Mode and Visual Selection Mode for consistency.
-		me.CloseDropDown();
+		if (keepDropDownOpen !== true)
+		{
+			me.CloseDropDown();
+		}
 	}
 
-	this._internal.UndoClearInputForSearch = function()
+	this._internal.UndoClearInputForSearch = function() // Undo/exit search mode for input field
 	{
 		if (me.TextSelectionMode() === true)
 		{
@@ -17487,6 +17564,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
 	// ============================================
@@ -17940,12 +18024,45 @@ Fit.Controls.DropDown = function(ctlId)
 		focusInputOnMobile = orgFocusInputOnMobile;
 	}
 
-	function setInputEditing(input, val, keepStateOnParent)
+	/// <function container="Fit.Controls.DropDown" name="SearchModeOnFocus" access="public" returns="boolean">
+	/// 	<description>
+	/// 		Clear input and display "Search.." placeholder when control receives focus.
+	/// 		If SearchModeOnFocus is enabled, InputEnabled will also be enabled. Disabling
+	/// 		SearchModeOnFocus does not disable InputEnabled.
+	/// 	</description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, True enables search mode on focus, False disables it </param>
+	/// </function>
+	this.SearchModeOnFocus = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			searchModeOnFocus = val;
+
+			if (me.InputEnabled() === false && val === true)
+			{
+				me.InputEnabled(true);
+			}
+		}
+
+		return searchModeOnFocus;
+	}
+
+	function setInputEditing(input, val, keepStateOnParent) // Input being edited "word wraps" to separate line
 	{
 		Fit.Validation.ExpectInstance(input, HTMLInputElement);
 		Fit.Validation.ExpectBoolean(val);
 		Fit.Validation.ExpectBoolean(keepStateOnParent, true);
 
+		// Do not change editing state for txtPrimary when SearchModeOnFocus is enabled.
+		// In this case txtPrimary remains locked in editing mode so it remains visible,
+		// even when changing focus within the control and when adding or removing items.
+		if (searchModeOnFocus === true && input === txtPrimary)
+		{
+			return;
+		}
+
 		if (keepStateOnParent !== true)
 		{
 			Fit.Dom.Data(input.parentElement, "editing", val === true ? "true" : null);
@@ -19179,6 +19296,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 = [];
@@ -19203,7 +19323,7 @@ Fit.Controls.WSDropDown = function(ctlId)
 
 		// Create ListView
 
-		list = new Fit.Controls.WSListView(ctlId + "__WSListView");
+		list = new Fit.Controls.WSListView(me.GetId() + "__WSListView");
 		list.OnRequest(function(sender, eventArgs)
 		{
 			if (fireEventHandlers(onRequestHandlers, list, eventArgs) === false)
@@ -19255,7 +19375,7 @@ Fit.Controls.WSDropDown = function(ctlId)
 
 		// Create TreeView
 
-		tree = new Fit.Controls.WSTreeView(ctlId + "__WSTreeView");
+		tree = new Fit.Controls.WSTreeView(me.GetId() + "__WSTreeView");
 		tree.Selectable(true); // Make nodes selectable by default when added
 		tree.Width(100, "%");
 		//tree.Lines(true); // DISABLED - lines do not scale with font size
@@ -19413,7 +19533,7 @@ Fit.Controls.WSDropDown = function(ctlId)
 
 		var skipUpdateActionMenuOnChange = false;
 
-		actionMenu = new Fit.Controls.ListView(ctlId + "__ActionsListView");
+		actionMenu = new Fit.Controls.ListView(me.GetId() + "__ActionsListView");
 		actionMenu.OnSelect(function(sender, item) // Using OnSelect instead of OnItemSelectionChanging since DropDown fires OnItemSelectionChanging when selection is changed, which would result in OnItemSelectionChanging being executed multiple times
 		{
 			if (item.Value === "SearchMore")
@@ -19422,7 +19542,7 @@ Fit.Controls.WSDropDown = function(ctlId)
 			}
 			else if (item.Value === "ShowAll")
 			{
-				me._internal.UndoClearInputForSearch(); // In case user first picked SearchMore, changed their mind, and then selected ShowAll
+				me._internal.UndoClearInputForSearch(); // In case user first picked SearchMore, entered a search value, changed their mind, and then selected ShowAll
 
 				useActionMenuAfterLoad = false;
 
@@ -19523,21 +19643,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 +19899,111 @@ 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.SearchModeOnFocus = Fit.Core.CreateOverride(this.SearchModeOnFocus, function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true && val !== base())
+		{
+			base(val);
+			updateActionMenu(); // Add/remove search option depending on whether SearchModeOnFocus is enabled or not
 		}
 
 		return base();
 	});
 
+	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 +20021,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 +20085,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();
 	});
@@ -20052,18 +20293,21 @@ Fit.Controls.WSDropDown = function(ctlId)
 
 		actionMenu.RemoveItems();
 
-		if (me.InputEnabled() === true)
+		if (me.InputEnabled() === true && me.SearchModeOnFocus() === false)
 		{
 			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 + "</i>", "ShowAllNoneFound");
+			}
 		}
 
 		if (addRemoveAll === true)
@@ -20083,6 +20327,11 @@ Fit.Controls.WSDropDown = function(ctlId)
 		translations = locale.Translations;
 
 		updateActionMenu();
+
+		if (customPlaceholderSet === false)
+		{
+			orgPlaceholder(me.InputEnabled() === true ? translations.Search : "");
+		}
 	}
 
 	function onDataLoaded(cb)
@@ -20169,11 +20418,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			: "List with options is empty"
 			}
 		},
 		"da":
@@ -20182,11 +20433,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			: "Liste med valgmuligheder er tom"
 			}
 		},
 		"de":
@@ -20195,11 +20448,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			: "Liste der Optionen ist leer"
 			}
 		}
 	}
@@ -21323,12 +21578,14 @@ Fit.Controls.Input = function(ctlId)
 	Fit.Core.Extend(this, Fit.Controls.ControlBase).Apply(ctlId);
 
 	var me = this;
-	var orgVal = "";
-	var preVal = "";
+	var orgVal = "";	// Holds initial value used to determine IsDirty state
+	var preVal = "";	// Holds latest change made by user - used to determine whether OnChange needs to be fired
 	var input = null;
 	var cmdResize = null;
 	var designEditor = null;
-	var htmlWrappedInParagraph = false;
+	var designEditorDirty = false;
+	var designEditorDirtyPending = false;
+	//var htmlWrappedInParagraph = false;
 	var wasAutoChangedToMultiLineMode = false; // Used to revert to single line if multi line was automatically enabled along with DesignMode(true), Maximizable(true), or Resizable(true)
 	var minimizeHeight = -1;
 	var maximizeHeight = -1;
@@ -21566,18 +21823,32 @@ Fit.Controls.Input = function(ctlId)
 
 		if (Fit.Validation.IsSet(val) === true)
 		{
-			var fireOnChange = (designEditor === null && me.Value() !== val); // DesignEditor invokes input.onchange() if value is changed
+			var fireOnChange = (me.Value() !== val);
 
 			orgVal = (preserveDirtyState !== true ? val : orgVal);
 			preVal = val;
+			designEditorDirty = designEditorDirtyPending === true ? true : false;
+			designEditorDirtyPending = false;
 
-			if (val.indexOf("<p>") === 0)
-				htmlWrappedInParagraph = true; // Indicates that val is comparable with value from CKEditor which wraps content in paragraphs
+			/*if (val.indexOf("<p>") === 0)
+				htmlWrappedInParagraph = true; // Indicates that val is comparable with value from CKEditor which wraps content in paragraphs*/
 
 			if (designEditor !== null)
-				CKEDITOR.instances[me.GetId() + "_DesignMode"].setData(val);
+			{
+				// NOTICE: Invalid HTML is removed, so an all invalid HTML string will be discarded
+				// by the editor, resulting in the editor's getData() function returning an empty string.
+
+				// Calling setData(..) fires CKEditor's onchange event which in turn fires
+				// Input's OnChange event. Suppress OnChange which is fired further down.
+				me._internal.ExecuteWithNoOnChange(function()
+				{
+					CKEDITOR.instances[me.GetId() + "_DesignMode"].setData(val);
+				});
+			}
 			else
+			{
 				input.value = val;
+			}
 
 			if (Fit._internal.Controls.Input.BlobManager.RevokeExternalBlobUrlsOnDispose === true)
 			{
@@ -21604,14 +21875,69 @@ Fit.Controls.Input = function(ctlId)
 		}
 
 		if (designEditor !== null)
-			return CKEDITOR.instances[me.GetId() + "_DesignMode"].getData();
+		{
+			// If user has not changed value, then return the value initially set.
+			// CKEditor may change (optimize) HTML when applied, but we always want
+			// the value initially set when no changes have been made by the user.
+			// See additional comments regarding this in the IsDirty() implementation.
+			if (designEditorDirty === false)
+			{
+				return orgVal;
+			}
+
+			var curVal = CKEDITOR.instances[me.GetId() + "_DesignMode"].getData();
+
+			// Remove extra line break added by htmlwriter plugin at the end: <p>Hello world</p>\n
+			curVal = curVal.replace(/<\/p>\n$/, "</p>");
+
+			// Remove empty class attribute on <img> tags which may be temporarily set when selecting
+			// an image using the dragresize plugin. This plugin adds a CSS class (ckimgrsz) to the image
+			// tag while being selected, although the class name is removed when calling getData() above.
+			// However, the empty class attribute is useless, so we remove it. It also results in IsDirty()
+			// returning True while the image is selected if we keep it. Actually the class attribute should
+			// never have been returned since the allowedContent option does not allow it - might be a minor bug.
+			curVal = curVal.replace(/(<img.*?) class=""(.*?>)/, "$1$2"); // Not using /g switch as only one image can be selected
+
+			return curVal;
+		}
 
 		return input.value;
 	}
 
+	// See documentation on ControlBase
+	this.UserValue = Fit.Core.CreateOverride(this.UserValue, function(val)
+	{
+		if (Fit.Validation.IsSet(val) === true && designEditor !== null)
+		{
+			designEditorDirtyPending = true;
+		}
+
+		return base(val);
+	});
+
 	// See documentation on ControlBase
 	this.IsDirty = function()
 	{
+		if (designEditor !== null)
+		{
+			// Never do value comparison in DesignMode.
+			// A value such as "Hello world" could have been provided,
+			// which by CKEditor would be returned as "<p>Hello world</p>".
+			// A value such as '<p style="text-align: center;">Hello</p>' could
+			// also have been set, which by CKEditor would be optimized to
+			// '<p style="text-align:center">Hello</p>' via ACF (Advanced Content Filter):
+			// https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter.html
+			// Furthermore invalid HTML is removed while valid HTML is kept.
+			// All this makes it very difficult to reliably determine dirty state
+			// by comparing values. Therefore, if the user changed anything by interacting
+			// with the editor, or UserValue(..) was called, always consider the value dirty.
+
+			// Another positive of avoiding value comparison to determine dirty state
+			// is that retrieving the value from CKEditor is fairly expensive.
+
+			return designEditorDirty;
+		}
+
 		return (orgVal !== me.Value());
 	}
 
@@ -21712,7 +22038,7 @@ Fit.Controls.Input = function(ctlId)
 			});
 		}
 
-		me = orgVal = preVal = input = cmdResize = designEditor = htmlWrappedInParagraph = wasAutoChangedToMultiLineMode = minimizeHeight = maximizeHeight = minMaxUnit = resizable = nativeResizableAvailable = mutationObserverId = rootedEventId = createWhenReadyIntervalId = isIe8 = debounceOnChangeTimeout = debouncedOnChange = imageBlobUrls = null;
+		me = orgVal = preVal = input = cmdResize = designEditor = designEditorDirty = designEditorDirtyPending /*= htmlWrappedInParagraph*/ = wasAutoChangedToMultiLineMode = minimizeHeight = maximizeHeight = minMaxUnit = resizable = nativeResizableAvailable = mutationObserverId = rootedEventId = createWhenReadyIntervalId = isIe8 = debounceOnChangeTimeout = debouncedOnChange = imageBlobUrls = null;
 
 		base();
 	});
@@ -22224,6 +22550,16 @@ Fit.Controls.Input = function(ctlId)
 							CKEDITOR.config.skin = Fit._internal.Controls.Input.Editor.Skin;
 						}
 
+						CKEDITOR.on("instanceReady", function(ev)
+						{
+							// Do not produce XHTML self-closing tags such as <br /> and <img src="img.jpg" />
+							// https://ckeditor.com/docs/ckeditor4/latest/features/output_format.html
+							// NOTICE: The htmlwriter plugin is required for this to work!
+							// Output produced is now both HTML4 and HTML5 compatible, but is not valid
+							// XHTML anymore! Self-closing tags are allowed in HTML5 but not valid in HTML4.
+							ev.editor.dataProcessor.writer.selfClosingEnd = ">"; // Defaults to ' />'
+						});
+
 						// Register OnShow and OnHide event handlers when a dialog is opened for the first time.
 						// IMPORTANT: These event handlers are shared by all input control instances in Design Mode,
 						// so we cannot use 'me' to access the current control for which a dialog is opened.
@@ -22645,6 +22981,7 @@ Fit.Controls.Input = function(ctlId)
 			title: "",
 			startupFocus: focused === true ? "end" : false,
 			extraPlugins: Fit._internal.Controls.Input.Editor.Plugins.join(","), // "justify,pastefromword,base64image,base64imagepaste,dragresize",
+			clipboard_handleImages: false, // Disable native support for image pasting - allow base64imagepaste plugin to handle image data if loaded
 			base64image: // Custom property used by base64image plugin if loaded
 			{
 				storage: "blob", // "base64" (default) or "blob" - base64 will always be provided by browsers not supporting blob storage
@@ -22736,6 +23073,21 @@ Fit.Controls.Input = function(ctlId)
 				},
 				change: function() // CKEditor bug: not fired in Opera 12 (possibly other old versions as well)
 				{
+					if (me._internal.FireOnChangeSuppressed === true)
+					{
+						// Do not process event - it has been fired by CKEditor when HTML
+						// value was initially assigned in Value(..) which happend through
+						// me._internal.ExecuteWithNoOnChange(function() { .. }).
+						// See Value(..) implementation for details.
+						return;
+					}
+
+					// Assume value was changed by user if control has focus
+					if (designEditorDirty === false && me.Focused() === true)
+					{
+						designEditorDirty = true;
+					}
+
 					input.onkeyup();
 				},
 				resize: function() // Fires when size is changed, not just when resized using resize handle in lower right cornor
@@ -22872,7 +23224,9 @@ Fit.Controls.Input = function(ctlId)
 
 		if (newVal !== preVal)
 		{
-			if (designEditor !== null && htmlWrappedInParagraph === false) // A value not wrapped in paragraph(s) was assigned to HTML editor
+			// DISABLED: No longer necessary with the introduction of designEditorDirty which ensures
+			// that we get the initial value set from Value(), unless changed by the user using the editor.
+			/*if (designEditor !== null && htmlWrappedInParagraph === false) // A value not wrapped in paragraph(s) was assigned to HTML editor
 			{
 				// Do not trigger OnChange if the only difference is that CKEditor
 				// wrapped the value initially assigned to control in a paragraph.
@@ -22888,7 +23242,7 @@ Fit.Controls.Input = function(ctlId)
 				{
 					return; // Do not fire OnChange
 				}
-			}
+			}*/
 
 			preVal = newVal;
 			me._internal.FireOnChange();
@@ -23019,10 +23373,10 @@ Fit._internal.Controls.Input.Editor =
 	/// </member>
 	Skin: null, // Notice: CKEditor does not support multiple different skins on the same page - do not change value once an editor has been created
 
-	/// <member container="Fit._internal.Controls.Input.Editor" name="Plugins" access="public" static="true" type="('justify' | 'pastefromword' | 'resize' | 'base64image' | 'base64imagepaste' | 'dragresize')[]">
+	/// <member container="Fit._internal.Controls.Input.Editor" name="Plugins" access="public" static="true" type="('htmlwriter' | 'justify' | 'pastefromword' | 'resize' | 'base64image' | 'base64imagepaste' | 'dragresize')[]">
 	/// 	<description> Additional plugins used with DesignMode </description>
 	/// </member>
-	Plugins: ["justify", "pastefromword", "resize" /*"base64image", "base64imagepaste", "dragresize"*/], // Regarding base64imagepaste and dragresize: IE11 has native support for pasting images as base64 and IE8+ has native support for image resizing, so plugins are not in effect in IE, even when enabled
+	Plugins: ["htmlwriter", "justify", "pastefromword", "resize" /*"base64image", "base64imagepaste", "dragresize"*/], // Regarding base64imagepaste and dragresize: IE11 has native support for pasting images as base64 and IE8+ has native support for image resizing, so plugins are not in effect in IE, even when enabled
 
 	/// <member container="Fit._internal.Controls.Input.Editor" name="Toolbar" access="public" static="true" type="( { name: 'BasicFormatting', items: ('Bold' | 'Italic' | 'Underline')[] } | { name: 'Justify', items: ('JustifyLeft' | 'JustifyCenter' | 'JustifyRight')[] } | { name: 'Lists', items: ('NumberedList' | 'BulletedList' | 'Indent' | 'Outdent')[] } | { name: 'Links', items: ('Link' | 'Unlink')[] } | { name: 'Insert', items: ('base64image')[] } )[]">
 	/// 	<description> Toolbar buttons used with DesignMode - make sure necessary plugins are loaded (see Fit._internal.Controls.Input.EditorPlugins) </description>