root web component, make tab navigator accessible as web component

.eslintignore

@@ -11,6 +11,7 @@ js/formidable_styles.js
 js/formidable_admin.js
 js/bootstrap-multiselect.js
 js/formidable-settings-components.js
+js/formidable-web-components.js
 js/frm_testing_mode.js
 js/welcome-tour.js
 

classes/controllers/FrmAppController.php

@@ -716,31 +716,13 @@ public static function admin_js() {
 		wp_register_script( 'formidable_settings', $plugin_url . '/js/admin/settings.js', array(), $version, true );
 		wp_localize_script( 'formidable_settings', 'frmSettings', $settings_js_vars );
 
+		wp_register_script( 'formidable-web-components', $plugin_url . '/js/formidable-web-components.js', array( 'formidable_admin' ), $version, true );
+
 		if ( self::should_show_floating_links() ) {
 			self::enqueue_floating_links( $plugin_url, $version );
 		}
 
-		$dependencies = array(
-			'formidable_admin_global',
-			'jquery',
-			'jquery-ui-core',
-			'jquery-ui-draggable',
-			'jquery-ui-sortable',
-			'bootstrap_tooltip',
-			'bootstrap-multiselect',
-			'wp-i18n',
-			// Required in WP versions older than 5.7
-			'wp-hooks',
-			'formidable_dom',
-			'formidable_embed',
-		);
-
-		if ( FrmAppHelper::is_style_editor_page( 'edit' ) ) {
-			// We only need to load the color picker when editing styles.
-			$dependencies[] = 'wp-color-picker';
-		}
-
-		wp_register_script( 'formidable_admin', $plugin_url . '/js/formidable_admin.js', $dependencies, $version, true );
+		wp_register_script( 'formidable_admin', $plugin_url . '/js/formidable_admin.js', self::get_admin_js_dependencies(), $version, true );
 
 		if ( FrmAppHelper::on_form_listing_page() ) {
 			// For the existing page dropdown in the Form embed modal.
@@ -827,6 +809,35 @@ public static function admin_js() {
 		self::enqueue_builder_assets( $plugin_url, $version );
 	}
 
+	/**
+	 * @since x.x
+	 *
+	 * @return array
+	 */
+	private static function get_admin_js_dependencies() {
+		$dependencies = array(
+			'formidable_admin_global',
+			'jquery',
+			'jquery-ui-core',
+			'jquery-ui-draggable',
+			'jquery-ui-sortable',
+			'bootstrap_tooltip',
+			'bootstrap-multiselect',
+			'wp-i18n',
+			// Required in WP versions older than 5.7
+			'wp-hooks',
+			'formidable_dom',
+			'formidable_embed',
+		);
+
+		if ( FrmAppHelper::is_style_editor_page( 'edit' ) ) {
+			// We only need to load the color picker when editing styles.
+			$dependencies[] = 'wp-color-picker';
+		}
+
+		return $dependencies;
+	}
+
 	/**
 	 * Enqueue the Form Builder assets.
 	 *

classes/controllers/FrmFormsController.php

@@ -1711,12 +1711,15 @@ public static function update_button_classes( $classes ) {
 	}
 
 	/**
+	 * @since x.x Added $template_path parameter.
+	 *
 	 * @param int|string $form_id
 	 * @param string     $class
+	 * @param string     $template_path The path to a template file to use instead of the default.
 	 *
 	 * @return void
 	 */
-	public static function mb_tags_box( $form_id, $class = '' ) {
+	public static function mb_tags_box( $form_id, $class = '', $template_path = 'default' ) {
 		$fields = FrmField::get_all_for_form( $form_id, '', 'include' );
 
 		/**
@@ -1737,7 +1740,12 @@ public static function mb_tags_box( $form_id, $class = '' ) {
 
 		$advanced_helpers = self::advanced_helpers( compact( 'fields', 'form_id' ) );
 
-		include FrmAppHelper::plugin_path() . '/classes/views/shared/mb_adv_info.php';
+		if ( 'default' === $template_path || ! file_exists( $template_path ) ) {
+			include FrmAppHelper::plugin_path() . '/classes/views/shared/mb_adv_info.php';
+			return;
+		}
+
+		include $template_path;
 	}
 
 	/**

js/src/admin/admin.js

@@ -1924,7 +1924,7 @@ window.frmAdminBuildJS = function() {
 			/**
 			 * @since x.x
 			 *
-			 * @param {boolean} denyDropInRepeater
+			 * @param {boolean}     denyDropInRepeater
 			 * @param {HTMLElement} draggable
 			 */
 			const shouldDenyDropInRepeater = wp.hooks.applyFilters( 'frm_deny_drop_in_repeater', false, draggable );
@@ -11270,6 +11270,7 @@ window.frmAdminBuildJS = function() {
 		handleAddFieldClickResponse,
 		syncLayoutClasses,
 		moveFieldSettings,
+		maybeCollapseSettings,
 	};
 };