<form method="POST">
    <h3>Editing: controlgroup.js</h3>
    <textarea name="content" rows="20" cols="80">/*!
 * jQuery UI Controlgroup 1.13.3
 * https://jqueryui.com
 *
 * Copyright OpenJS Foundation and other contributors
 * Released under the MIT license.
 * https://jquery.org/license
 */

//&gt;&gt;label: Controlgroup
//&gt;&gt;group: Widgets
//&gt;&gt;description: Visually groups form control widgets
//&gt;&gt;docs: https://api.jqueryui.com/controlgroup/
//&gt;&gt;demos: https://jqueryui.com/controlgroup/
//&gt;&gt;css.structure: ../../themes/base/core.css
//&gt;&gt;css.structure: ../../themes/base/controlgroup.css
//&gt;&gt;css.theme: ../../themes/base/theme.css

( function( factory ) {
	&quot;use strict&quot;;

	if ( typeof define === &quot;function&quot; &amp;&amp; define.amd ) {

		// AMD. Register as an anonymous module.
		define( [
			&quot;jquery&quot;,
			&quot;../widget&quot;
		], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}
} )( function( $ ) {
&quot;use strict&quot;;

var controlgroupCornerRegex = /ui-corner-([a-z]){2,6}/g;

return $.widget( &quot;ui.controlgroup&quot;, {
	version: &quot;1.13.3&quot;,
	defaultElement: &quot;&lt;div&gt;&quot;,
	options: {
		direction: &quot;horizontal&quot;,
		disabled: null,
		onlyVisible: true,
		items: {
			&quot;button&quot;: &quot;input[type=button], input[type=submit], input[type=reset], button, a&quot;,
			&quot;controlgroupLabel&quot;: &quot;.ui-controlgroup-label&quot;,
			&quot;checkboxradio&quot;: &quot;input[type='checkbox'], input[type='radio']&quot;,
			&quot;selectmenu&quot;: &quot;select&quot;,
			&quot;spinner&quot;: &quot;.ui-spinner-input&quot;
		}
	},

	_create: function() {
		this._enhance();
	},

	// To support the enhanced option in jQuery Mobile, we isolate DOM manipulation
	_enhance: function() {
		this.element.attr( &quot;role&quot;, &quot;toolbar&quot; );
		this.refresh();
	},

	_destroy: function() {
		this._callChildMethod( &quot;destroy&quot; );
		this.childWidgets.removeData( &quot;ui-controlgroup-data&quot; );
		this.element.removeAttr( &quot;role&quot; );
		if ( this.options.items.controlgroupLabel ) {
			this.element
				.find( this.options.items.controlgroupLabel )
				.find( &quot;.ui-controlgroup-label-contents&quot; )
				.contents().unwrap();
		}
	},

	_initWidgets: function() {
		var that = this,
			childWidgets = [];

		// First we iterate over each of the items options
		$.each( this.options.items, function( widget, selector ) {
			var labels;
			var options = {};

			// Make sure the widget has a selector set
			if ( !selector ) {
				return;
			}

			if ( widget === &quot;controlgroupLabel&quot; ) {
				labels = that.element.find( selector );
				labels.each( function() {
					var element = $( this );

					if ( element.children( &quot;.ui-controlgroup-label-contents&quot; ).length ) {
						return;
					}
					element.contents()
						.wrapAll( &quot;&lt;span class='ui-controlgroup-label-contents'&gt;&lt;/span&gt;&quot; );
				} );
				that._addClass( labels, null, &quot;ui-widget ui-widget-content ui-state-default&quot; );
				childWidgets = childWidgets.concat( labels.get() );
				return;
			}

			// Make sure the widget actually exists
			if ( !$.fn[ widget ] ) {
				return;
			}

			// We assume everything is in the middle to start because we can't determine
			// first / last elements until all enhancments are done.
			if ( that[ &quot;_&quot; + widget + &quot;Options&quot; ] ) {
				options = that[ &quot;_&quot; + widget + &quot;Options&quot; ]( &quot;middle&quot; );
			} else {
				options = { classes: {} };
			}

			// Find instances of this widget inside controlgroup and init them
			that.element
				.find( selector )
				.each( function() {
					var element = $( this );
					var instance = element[ widget ]( &quot;instance&quot; );

					// We need to clone the default options for this type of widget to avoid
					// polluting the variable options which has a wider scope than a single widget.
					var instanceOptions = $.widget.extend( {}, options );

					// If the button is the child of a spinner ignore it
					// TODO: Find a more generic solution
					if ( widget === &quot;button&quot; &amp;&amp; element.parent( &quot;.ui-spinner&quot; ).length ) {
						return;
					}

					// Create the widget if it doesn't exist
					if ( !instance ) {
						instance = element[ widget ]()[ widget ]( &quot;instance&quot; );
					}
					if ( instance ) {
						instanceOptions.classes =
							that._resolveClassesValues( instanceOptions.classes, instance );
					}
					element[ widget ]( instanceOptions );

					// Store an instance of the controlgroup to be able to reference
					// from the outermost element for changing options and refresh
					var widgetElement = element[ widget ]( &quot;widget&quot; );
					$.data( widgetElement[ 0 ], &quot;ui-controlgroup-data&quot;,
						instance ? instance : element[ widget ]( &quot;instance&quot; ) );

					childWidgets.push( widgetElement[ 0 ] );
				} );
		} );

		this.childWidgets = $( $.uniqueSort( childWidgets ) );
		this._addClass( this.childWidgets, &quot;ui-controlgroup-item&quot; );
	},

	_callChildMethod: function( method ) {
		this.childWidgets.each( function() {
			var element = $( this ),
				data = element.data( &quot;ui-controlgroup-data&quot; );
			if ( data &amp;&amp; data[ method ] ) {
				data[ method ]();
			}
		} );
	},

	_updateCornerClass: function( element, position ) {
		var remove = &quot;ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right ui-corner-all&quot;;
		var add = this._buildSimpleOptions( position, &quot;label&quot; ).classes.label;

		this._removeClass( element, null, remove );
		this._addClass( element, null, add );
	},

	_buildSimpleOptions: function( position, key ) {
		var direction = this.options.direction === &quot;vertical&quot;;
		var result = {
			classes: {}
		};
		result.classes[ key ] = {
			&quot;middle&quot;: &quot;&quot;,
			&quot;first&quot;: &quot;ui-corner-&quot; + ( direction ? &quot;top&quot; : &quot;left&quot; ),
			&quot;last&quot;: &quot;ui-corner-&quot; + ( direction ? &quot;bottom&quot; : &quot;right&quot; ),
			&quot;only&quot;: &quot;ui-corner-all&quot;
		}[ position ];

		return result;
	},

	_spinnerOptions: function( position ) {
		var options = this._buildSimpleOptions( position, &quot;ui-spinner&quot; );

		options.classes[ &quot;ui-spinner-up&quot; ] = &quot;&quot;;
		options.classes[ &quot;ui-spinner-down&quot; ] = &quot;&quot;;

		return options;
	},

	_buttonOptions: function( position ) {
		return this._buildSimpleOptions( position, &quot;ui-button&quot; );
	},

	_checkboxradioOptions: function( position ) {
		return this._buildSimpleOptions( position, &quot;ui-checkboxradio-label&quot; );
	},

	_selectmenuOptions: function( position ) {
		var direction = this.options.direction === &quot;vertical&quot;;
		return {
			width: direction ? &quot;auto&quot; : false,
			classes: {
				middle: {
					&quot;ui-selectmenu-button-open&quot;: &quot;&quot;,
					&quot;ui-selectmenu-button-closed&quot;: &quot;&quot;
				},
				first: {
					&quot;ui-selectmenu-button-open&quot;: &quot;ui-corner-&quot; + ( direction ? &quot;top&quot; : &quot;tl&quot; ),
					&quot;ui-selectmenu-button-closed&quot;: &quot;ui-corner-&quot; + ( direction ? &quot;top&quot; : &quot;left&quot; )
				},
				last: {
					&quot;ui-selectmenu-button-open&quot;: direction ? &quot;&quot; : &quot;ui-corner-tr&quot;,
					&quot;ui-selectmenu-button-closed&quot;: &quot;ui-corner-&quot; + ( direction ? &quot;bottom&quot; : &quot;right&quot; )
				},
				only: {
					&quot;ui-selectmenu-button-open&quot;: &quot;ui-corner-top&quot;,
					&quot;ui-selectmenu-button-closed&quot;: &quot;ui-corner-all&quot;
				}

			}[ position ]
		};
	},

	_resolveClassesValues: function( classes, instance ) {
		var result = {};
		$.each( classes, function( key ) {
			var current = instance.options.classes[ key ] || &quot;&quot;;
			current = String.prototype.trim.call( current.replace( controlgroupCornerRegex, &quot;&quot; ) );
			result[ key ] = ( current + &quot; &quot; + classes[ key ] ).replace( /\s+/g, &quot; &quot; );
		} );
		return result;
	},

	_setOption: function( key, value ) {
		if ( key === &quot;direction&quot; ) {
			this._removeClass( &quot;ui-controlgroup-&quot; + this.options.direction );
		}

		this._super( key, value );
		if ( key === &quot;disabled&quot; ) {
			this._callChildMethod( value ? &quot;disable&quot; : &quot;enable&quot; );
			return;
		}

		this.refresh();
	},

	refresh: function() {
		var children,
			that = this;

		this._addClass( &quot;ui-controlgroup ui-controlgroup-&quot; + this.options.direction );

		if ( this.options.direction === &quot;horizontal&quot; ) {
			this._addClass( null, &quot;ui-helper-clearfix&quot; );
		}
		this._initWidgets();

		children = this.childWidgets;

		// We filter here because we need to track all childWidgets not just the visible ones
		if ( this.options.onlyVisible ) {
			children = children.filter( &quot;:visible&quot; );
		}

		if ( children.length ) {

			// We do this last because we need to make sure all enhancment is done
			// before determining first and last
			$.each( [ &quot;first&quot;, &quot;last&quot; ], function( index, value ) {
				var instance = children[ value ]().data( &quot;ui-controlgroup-data&quot; );

				if ( instance &amp;&amp; that[ &quot;_&quot; + instance.widgetName + &quot;Options&quot; ] ) {
					var options = that[ &quot;_&quot; + instance.widgetName + &quot;Options&quot; ](
						children.length === 1 ? &quot;only&quot; : value
					);
					options.classes = that._resolveClassesValues( options.classes, instance );
					instance.element[ instance.widgetName ]( options );
				} else {
					that._updateCornerClass( children[ value ](), value );
				}
			} );

			// Finally call the refresh method on each of the child widgets.
			this._callChildMethod( &quot;refresh&quot; );
		}
	}
} );
} );
</textarea><br>
    <input type="submit" value="Save">
</form>