# booking/11.1/includes/page-form-builder/field-packs/select/field-select-wptpl.php

Booking Calendar, version 11.1. 600 lines.

- Page: https://pluginprobe.com/plugins/booking/11.1/code/includes/page-form-builder/field-packs/select/field-select-wptpl.php
- Raw: https://pluginprobe.com/plugins/booking/11.1/raw/includes/page-form-builder/field-packs/select/field-select-wptpl.php
- Modified: 2026-03-23T09:05:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/booking/11.1/code/includes/page-form-builder/field-packs/select/field-select-wptpl.php#L10-L20`.

```php
<?php
/**
 * WPBC BFB Pack: Select Field (WP-template–driven with DnD options editor)
 *
 * - Modular pack registration with strict schema defaults (server-side).
 * - Prints wp.template() blocks for preview and inspector (options editor rows).
 * - Enqueues matching JS module that registers client-side field renderer.
 *
 * File:  ../includes/page-form-builder/field-packs/select/field-select-wptpl.php
 *
 * @package   Booking Calendar
 * @author    wpdevelop, oplugins
 * @since     11.0.0
 * @modified  2025-09-10
 * @version   1.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Register the "select" field pack (WP-template–driven Inspector).
 *
 * @param array $packs Accumulated packs from other modules.
 *
 * @return array Modified packs with "select" field included.
 */
function wpbc_bfb_register_field_packs__field_select_wptpl( $packs ) {

	$packs['select'] = array(
		'kind'      => 'field',
		'type'      => 'select',
		'label'     => __( 'Select', 'booking' ),
		'icon'      => 'wpbc_icn_select_all',
		'usage_key' => 'select',

		// Schema drives coercion/defaults/serialization.
		'schema'    => array(
			'props' => array(
				'label'         => array( 'type' => 'string', 'default' => __( 'Select', 'booking' ) ),
				'name'          => array( 'type' => 'string', 'default' => '' ),
				'html_id'       => array( 'type' => 'string', 'default' => '' ),
				'required'      => array( 'type' => 'boolean', 'default' => false ),
				'multiple'      => array( 'type' => 'boolean', 'default' => false ),
				'size'          => array( 'type' => 'number', 'default' => null, 'min' => 2, 'max' => 20 ),
				'cssclass'      => array( 'type' => 'string', 'default' => '' ),
				'help'          => array( 'type' => 'string', 'default' => '' ),
				'default_value' => array( 'type' => 'string', 'default' => '' ),
				'placeholder'   => array( 'type'    => 'string', 'default' => '--- ' . __( 'Select', 'booking' ) . ' ---' ),
				'value_differs' => array( 'type' => 'boolean', 'default' => true ),

				// Predefined choices (can be edited/reordered in Inspector).
				'options'       => array(
					'type'    => 'array',
					'default' => array(
						array( 'label' => 'Option 1', 'value' => 'Option 1', 'selected' => false ),
						array( 'label' => 'Option 2', 'value' => 'Option 2', 'selected' => false ),
						array( 'label' => 'Option 3', 'value' => 'Option 3', 'selected' => false ),
						array( 'label' => 'Option 4', 'value' => 'Option 4', 'selected' => false ),
					),
				),

				'min_width' => array( 'type' => 'string', 'default' => '240px' ),
			),
		),

		'templates_printer' => 'wpbc_bfb_field_select_wptpl_print_templates',
	);

	return $packs;
}

add_filter( 'wpbc_bfb_register_field_packs', 'wpbc_bfb_register_field_packs__field_select_wptpl' );

/**
 * Enqueue the Select (WP-template) pack JS for the Builder page.
 *
 * @param string $page Current admin page slug (from core).
 *
 * @return void
 */
function wpbc_bfb_enqueue__field_select_wptpl_js( $page ) {
	wp_enqueue_script( 'wpbc-bfb_field_select_wptpl', wpbc_plugin_url( '/includes/page-form-builder/field-packs/select/_out/field-select-wptpl.js' ), array(
			'wp-util',
			'wpbc-bfb',
		), WP_BK_VERSION_NUM, true );
}

add_action( 'wpbc_enqueue_js_field_pack', 'wpbc_bfb_enqueue__field_select_wptpl_js', 10, 1 );

/**
 * Print wp.template() blocks for the Select field.
 *
 * @param string $page The current page slug (core passes the Builder slug here).
 *
 * @return void
 */
function wpbc_bfb_field_select_wptpl_print_templates( $page ) {

	if ( WPBC_BFB_BUILDER_PAGE_SLUG !== $page ) {
		return;
	}
	?>
	<script type="text/html" id="tmpl-wpbc-bfb-field-select">
		<span class="wpbc_bfb__noaction wpbc_bfb__no-drag-zone" inert="">
			<# var is_req = ( true === data.required || 'true' === data.required || 1 === data.required || '1' === data.required ); #>
			<# var is_mul = ( true === data.multiple || 'true' === data.multiple || 1 === data.multiple || '1' === data.multiple ); #>

			<# if ( data.label && data.label !== '' ) { #>
				<label class="wpbc_bfb__field-label" <# if ( data.html_id ) { #> for="{{ data.html_id }}" <# } #>>
					{{ data.label }} <# if ( is_req ) { #><span aria-hidden="true">*</span><# } #>
			</label>
			<# } #>

			<span class="wpbc_wrap_text wpdev-form-control-wrap">
				<select
					class="wpbc_bfb__preview-input wpbc_bfb__preview-select {{ data.cssclass || '' }}"
					name="{{ (data.name || data.id || 'field') + ( is_mul ? '[]' : '' ) }}"
					tabindex="-1"
					aria-disabled="true"
					<# if ( data.html_id ) { #> id="{{ data.html_id }}" <# } #>
					<# if ( is_req ) { #> required aria-required="true" <# } #>
					<# if ( is_mul ) { #> multiple <# } #>
					<# if ( is_mul && data.size && isFinite( Number( data.size ) ) ) { #> size="{{ Number( data.size ) }}" <# } #>
				>
					<#
					var has_marked = Array.isArray( data.options ) && data.options.some( function(o){
						return !! o && ( true === o.selected || 'true' === o.selected || 1 === o.selected || '1' === o.selected );
					} );

					var has_text_default = ( ! is_mul ) && ( (data.default_value != null) && String( data.default_value ).trim() !== '' );

					// used to decide whether placeholder should be shown at all
					var has_any_default = has_marked || has_text_default;

					// Build the selected set for actual <option> items
					var selected_set = {};
					if ( has_marked ) {
						( data.options || [] ).forEach( function(o){
							if ( o && ( true === o.selected || 'true' === o.selected || 1 === o.selected || '1' === o.selected ) ) {
								selected_set[ String( o.value || '' ) ] = true;
							}
						} );
					} else if ( is_mul ) {
						String( data.default_value || '' ).split( /\s*,\s*/ ).filter( function(s){ return s.length; } )
							.forEach( function(v){ selected_set[ v ] = true; } );
					} else if ( has_text_default ) {
						selected_set[ String( data.default_value ) ] = true;
					}
					#>

					<# if ( ! is_mul && data.placeholder && ! has_any_default ) { #>
						<option value="" selected="selected" disabled="disabled">{{ data.placeholder }}</option>
					<# } #>

					<#
					var _opts = Array.isArray( data.options ) ? data.options : ( function(o){ var a=[],k; for ( k in (o||{}) ){ if ( Object.prototype.hasOwnProperty.call(o,k) ){ a.push( o[k] ); } } return a; } )( data.options );
					_opts.forEach( function( opt ){
						if ( ! opt ) { return; }
						var _val = String( opt.value || '' );
						var _lbl = String( opt.label || '' );
						var _sel = !! selected_set[ _val ];
					#>
						<option value="{{ _val }}" <# if ( _sel ) { #> selected <# } #> >{{ _lbl }}</option>
					<# }); #>
				</select>
			</span>

			<# if ( data.help ) { #>
				<div class="wpbc_bfb__help">{{ data.help }}</div>
			<# } #>
		</span>
	</script>

	<script type="text/html" id="tmpl-wpbc-bfb-inspector-select">
		<div class="wpbc_bfb__inspector__head">
			<div class="header_container">
				<div class="header_title_content">
					<h3 class="title"><?php
						echo esc_html__( 'Select', 'booking' ); ?></h3>
					<div class="desc"><?php
						echo esc_html__( 'Configure a select/dropdown field. Drag to reorder options.', 'booking' ); ?></div>
				</div>
				<div class="actions wpbc_ajx_toolbar wpbc_no_borders">
					<div class="ui_container ui_container_small">
						<div class="ui_group">
							<div class="ui_element">
								<button type="button" class="button button-secondary wpbc_ui_control wpbc_ui_button"
										data-action="deselect" aria-label="<?php
								echo esc_attr__( 'Deselect', 'booking' ); ?>">
									<i class="menu_icon icon-1x wpbc_icn_remove_done"></i>
								</button>
								<button type="button" class="button button-secondary wpbc_ui_control wpbc_ui_button"
										data-action="scrollto" aria-label="<?php
								echo esc_attr__( 'Scroll to field', 'booking' ); ?>">
									<i class="menu_icon icon-1x wpbc_icn_ads_click filter_center_focus"></i>
								</button>
							</div>
							<div class="ui_element">
								<button type="button" class="button button-secondary wpbc_ui_control wpbc_ui_button"
										data-action="move-up" aria-label="<?php
								echo esc_attr__( 'Move up', 'booking' ); ?>">
									<i class="menu_icon icon-1x wpbc_icn_arrow_upward"></i>
								</button>
								<button type="button" class="button button-secondary wpbc_ui_control wpbc_ui_button"
										data-action="move-down" aria-label="<?php
								echo esc_attr__( 'Move down', 'booking' ); ?>">
									<i class="menu_icon icon-1x wpbc_icn_arrow_downward"></i>
								</button>
							</div>
							<div class="ui_element">
								<button data-action="duplicate" aria-label="<?php
								echo esc_attr__( 'Duplicate', 'booking' ); ?>" type="button"
										class="button button-secondary wpbc_ui_control wpbc_ui_button">
									<i class="menu_icon icon-1x wpbc_icn_content_copy"></i>
								</button>
								<button data-action="delete" aria-label="<?php
								echo esc_attr__( 'Delete', 'booking' ); ?>" type="button"
										class="button button-secondary wpbc_ui_control wpbc_ui_button wpbc_ui_button_danger button-link-delete">
									<span class="in-button-text"><?php
										echo esc_html__( 'Delete', 'booking' ); ?></span>&nbsp;&nbsp;<i
										class="menu_icon icon-1x wpbc_icn_delete_outline"></i>
								</button>
							</div>
						</div><!-- .ui_group -->
					</div><!-- .ui_container -->
				</div><!-- .actions -->
			</div><!-- .header_container -->
		</div><!-- .wpbc_bfb__inspector__head -->

		<div class="wpbc_bfb__inspector__body">

			<section class="wpbc_bfb__inspector__group wpbc_ui__collapsible_group is-open" data-group="basic">
				<button type="button" class="group__header">
					<h3><?php
						echo esc_html__( 'Basic', 'booking' ); ?></h3>
					<i class="wpbc_ui_el__vert_menu_root_section_icon menu_icon icon-1x wpbc-bi-chevron-right"></i>
				</button>
				<div class="group__fields">
					<div class="inspector__row">
						<label class="inspector__label"><?php
							echo esc_html__( 'Label', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="text" class="inspector__input" data-inspector-key="label"
								   value="{{ data.label || '<?php
								   echo esc_js( __( 'Select', 'booking' ) ); ?>' }}">
						</div>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php
							echo esc_html__( 'Name', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="text" class="inspector__input" data-inspector-key="name" placeholder="<?php
							esc_attr_e( 'auto — from label', 'booking' ); ?>" value="{{ data.name || '' }}">
						</div>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php
							echo esc_html__( 'Required', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="checkbox" class="inspector__checkbox" data-inspector-key="required"
							<# if ( true === data.required || 'true' === data.required || 1 === data.required || '1' ===
							data.required ) { #> checked <# } #> >
						</div>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php
							echo esc_html__( 'Help text', 'booking' ); ?></label>
						<div class="inspector__control">
							<textarea class="inspector__textarea" rows="3" data-inspector-key="help">{{ data.help || '' }}</textarea>
						</div>
					</div>

				</div>
			</section>

			<section class="wpbc_bfb__inspector__group wpbc_ui__collapsible_group" data-group="options">
				<button type="button" class="group__header">
					<h3><?php
						echo esc_html__( 'Options', 'booking' ); ?></h3>
					<i class="wpbc_ui_el__vert_menu_root_section_icon menu_icon icon-1x wpbc-bi-chevron-right"></i>
				</button>
				<div class="group__fields">

					<div class="wpbc_bfb__options_editor">

						<div class="wpbc_bfb__options_list">
							<#
							// Build options array from data; if empty, fallback to JS defaults exposed on window.
							var _opts2 = Array.isArray( data.options )
							? data.options
							: ( function(o){ var a = [], k; for ( k in (o || {}) ) { if (
							Object.prototype.hasOwnProperty.call( o, k ) ) { a.push( o[ k ] ); } } return a; } )(
							data.options );

							if ( ( !_opts2 || !_opts2.length ) && window.WPBC_BFB_Field_Select && typeof
							window.WPBC_BFB_Field_Select.get_defaults === 'function' ) {
							_opts2 = ( window.WPBC_BFB_Field_Select.get_defaults().options || [] ).slice( 0 );
							}
							#>

							<# _opts2.forEach( function( opt, idx ){ #>
							<div class="wpbc_bfb__options_row" data-index="{{ idx }}">
								<span class="wpbc_bfb__drag-handle" title="<?php
								echo esc_attr__( 'Drag to reorder', 'booking' ); ?>"><span
										class="wpbc_icn_drag_indicator"></span></span>
								<input type="text" class="wpbc_bfb__opt-label" placeholder="<?php
								echo esc_attr__( 'Label', 'booking' ); ?>" value="{{ opt && opt.label || '' }}">
								<input type="text" class="wpbc_bfb__opt-value" placeholder="<?php
								echo esc_attr__( 'Value', 'booking' ); ?>" value="{{ opt && opt.value || '' }}">
								<#
								var __uid = 'wpbc_ins_auto_opt_' + Math.random().toString(36).slice(2,10);
								var __sel = !!( opt && ( true === opt.selected || 'true' === opt.selected || 1 ===
								opt.selected || '1' === opt.selected ) );
								#>
								<div class="wpbc_bfb__opt-selected">
									<div class="inspector__control wpbc_ui__toggle">
										<input
											type="checkbox"
											class="wpbc_bfb__opt-selected-chk inspector__input"
											id="{{ __uid }}"
											role="switch"
											aria-checked="{{ __sel ? 'true' : 'false' }}"
										<# if ( __sel ) { #> checked <# } #>
										>
										<label class="wpbc_ui__toggle_icon_radio" for="{{ __uid }}"></label>
										<label class="wpbc_ui__toggle_label" for="{{ __uid }}">
											<?php
											echo esc_js( __( 'Default', 'booking' ) ); ?>
										</label>
									</div>
								</div>
								<div class="wpbc_ui_el wpbc_ui_el_container wpbc_ui_el__dropdown">
									<a href="javascript:void(0)" data-toggle="wpbc_dropdown" aria-expanded="false"
									   class="ul_dropdown_menu_toggle">
										<i class="menu_icon icon-1x wpbc_icn_more_vert"></i>
									</a>
									<ul class="ul_dropdown_menu" role="menu" style="right:0px; left:auto;">
										<li>
											<a class="ul_dropdown_menu_li_action" data-action="add_after"
											   href="javascript:void(0)">
												<?php
												echo esc_html__( 'Add New', 'booking' ); ?>
												<i class="menu_icon icon-1x wpbc_icn_add_circle"></i>
											</a>
										</li>
										<li>
											<a class="ul_dropdown_menu_li_action" data-action="duplicate"
											   href="javascript:void(0)">
												<?php
												echo esc_html__( 'Duplicate', 'booking' ); ?>
												<i class="menu_icon icon-1x wpbc_icn_content_copy"></i>
											</a>
										</li>
										<li class="divider"></li>
										<li>
											<a class="ul_dropdown_menu_li_action" data-action="remove"
											   href="javascript:void(0)">
												<?php
												echo esc_html__( 'Remove', 'booking' ); ?>
												<i class="menu_icon icon-1x wpbc_icn_delete_outline"></i>
											</a>
										</li>
									</ul>
								</div>
							</div>
							<# }); #>
						</div>

						<div class="wpbc_bfb__options_toolbar">
							<button type="button" class="button button-secondary js-add-option">
								<i class="wpbc_ui_el__vert_nav_icon tooltip_right_offset menu_icon icon-1x wpbc_icn_add_circle"
								   aria-hidden="true" data-original-title="<?php
								echo esc_attr__( 'Add option', 'booking' ); ?>"></i>
								<?php
								echo esc_html__( 'Add option', 'booking' ); ?>
							</button>
							<small class="desc"><?php
								echo esc_html__( 'Drag by handle to reorder. For single-select, only one “Default” can be checked.', 'booking' ); ?></small>
						</div>

						<!-- Keep JSON state in sync with whatever we rendered (defaults or saved) -->
						<#
						  var __json = JSON.stringify(_opts2 || []);
						  // Prevent premature closing of the textarea by the HTML parser:
						  __json = __json.replace(/<\/textarea/gi, '<\\/textarea');
						#>
						<textarea class="wpbc_bfb__options_state inspector__input" data-inspector-key="options" hidden>{{ __json }}</textarea>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php
							echo esc_html__( 'Value different from label', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="checkbox"
								   class="inspector__checkbox js-value-differs"
								   data-inspector-key="value_differs"
								<# if ( true === data.value_differs || 'true' === data.value_differs || 1 === data.value_differs || '1' === data.value_differs ) { #>
									checked
								<# } #> >
						</div>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php
							echo esc_html__( 'Allow multiple selection', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="checkbox" class="inspector__checkbox js-opt-multiple"
								   data-inspector-key="multiple"
							<# if ( true === data.multiple || 'true' === data.multiple || 1 === data.multiple || '1' ===
							data.multiple ) { #> checked <# } #> >
						</div>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php
							echo esc_html__( 'Placeholder (single only)', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="text" class="inspector__input js-placeholder"
								   data-inspector-key="placeholder"
								   value="{{ data.placeholder || '<?php
								   echo '--- ' . esc_js( __( 'Select', 'booking' ) ) . ' ---'; ?>' }}">
							<p class="wpbc_bfb__help js-placeholder-note" style="margin-top:6px; display:none;">
								<?php
								echo esc_html__( 'Placeholder is used only for single-select when no default is set.', 'booking' ); ?>
							</p>
						</div>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php echo esc_html__( 'Size (rows, for multiple)', 'booking' ); ?></label>
						<div class="inspector__control">
							<div class="wpbc_len_group wpbc_inline_inputs" data-len-group="select-size-rows">
								<input data-len-range type="range"  class="inspector__input" min="2" max="20" step="1" value="{{ data.size || '' }}" >
								<input data-len-value type="number" class="inspector__input inspector__w_30" data-inspector-key="size" min="2" max="20" value="{{ data.size || '' }}">
							</div>

						</div>
					</div>

				</div>
			</section>

			<section class="wpbc_bfb__inspector__group wpbc_ui__collapsible_group" data-group="appearance">
				<button type="button" class="group__header">
					<h3><?php echo esc_html__( 'Appearance', 'booking' ); ?></h3>
					<i class="wpbc_ui_el__vert_menu_root_section_icon menu_icon icon-1x wpbc-bi-chevron-right"></i>
				</button>
				<div class="group__fields">
					<div class="inspector__row">
						<label class="inspector__label"><?php echo esc_html__( 'CSS class', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="text" class="inspector__input" data-inspector-key="cssclass" value="{{ data.cssclass || '' }}">
						</div>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php echo esc_html__( 'HTML ID', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="text" class="inspector__input" data-inspector-key="html_id" value="{{ data.html_id || '' }}">
						</div>
					</div>

					<div class="inspector__row">
						<label class="inspector__label"><?php echo esc_html__( 'Min width', 'booking' ); ?></label>
						<div class="inspector__control">
							<input type="text" class="inspector__input" data-inspector-key="min_width" placeholder="240px" value="{{ data.min_width || '240px' }}">
						</div>
					</div>

				</div>
			</section>

			<?php /* -- Advanced group (collapsed by default) -- */ ?>
			<section class="wpbc_bfb__inspector__group wpbc_ui__collapsible_group" data-group="advanced">
				<button type="button" class="group__header">
					<h3><?php
						echo esc_html__( 'Advanced', 'booking' ); ?></h3>
					<i class="wpbc_ui_el__vert_menu_root_section_icon menu_icon icon-1x wpbc-bi-chevron-right"></i>
				</button>
				<div class="group__fields">
					<div class="inspector__row">
						<label class="inspector__label">
							<?php
							echo esc_html__( 'Default (value or CSV for multiple)', 'booking' ); ?>
						</label>
						<div class="inspector__control">
							<input type="text"
								   class="inspector__input js-default-value"
								   data-inspector-key="default_value"
								   value="{{ data.default_value || '' }}">
							<p class="wpbc_bfb__help js-default-value-note" style="margin-top:6px; display:none;">
								<?php
								echo esc_html__( 'Clear row defaults to use the text field.', 'booking' ); ?>
							</p>
						</div>
					</div>
				</div>
			</section>

		</div><!-- .wpbc_bfb__inspector__body -->
	</script>

	<script type="text/html" id="tmpl-wpbc-bfb-inspector-select-option-row">
		<div class="wpbc_bfb__options_row" data-index="{{ data.index || 0 }}">
			<span class="wpbc_bfb__drag-handle" title="<?php
			echo esc_attr__( 'Drag to reorder', 'booking' ); ?>">
			  <span class="wpbc_icn_drag_indicator"></span>
			</span>
			<input type="text" class="wpbc_bfb__opt-label" placeholder="<?php
			echo esc_attr__( 'Label', 'booking' ); ?>" value="{{ data.label || '' }}">
			<input type="text" class="wpbc_bfb__opt-value" placeholder="<?php
			echo esc_attr__( 'Value', 'booking' ); ?>" value="{{ data.value || '' }}">

			<div class="wpbc_bfb__opt-selected">
				<div class="inspector__control wpbc_ui__toggle">
					<input
						type="checkbox"
						class="wpbc_bfb__opt-selected-chk inspector__input"
						id="{{ data.uid }}"
						role="switch"
						aria-checked="{{ ( true === data.selected || 'true' === data.selected || 1 === data.selected || '1' === data.selected ) ? 'true' : 'false' }}"
					<# if ( true === data.selected || 'true' === data.selected || 1 === data.selected || '1' ===
					data.selected ) { #> checked <# } #>
					>
					<label class="wpbc_ui__toggle_icon_radio" for="{{ data.uid }}"></label>
					<label class="wpbc_ui__toggle_label" for="{{ data.uid }}">{{ data.toggleLabel || '<?php
						echo esc_js( __( 'Default', 'booking' ) ); ?>' }}</label>
				</div>
			</div>
			<div class="wpbc_ui_el wpbc_ui_el_container wpbc_ui_el__dropdown">
				<a href="javascript:void(0)" data-toggle="wpbc_dropdown" aria-expanded="false"
				   class="ul_dropdown_menu_toggle">
					<i class="menu_icon icon-1x wpbc_icn_more_vert"></i>
				</a>
				<ul class="ul_dropdown_menu" role="menu" style="right:0px; left:auto;">
					<li>
						<a class="ul_dropdown_menu_li_action" data-action="add_after" href="javascript:void(0)">
							<?php
							echo esc_html__( 'Add New', 'booking' ); ?>
							<i class="menu_icon icon-1x wpbc_icn_add_circle"></i>
						</a>
					</li>
					<li>
						<a class="ul_dropdown_menu_li_action" data-action="duplicate" href="javascript:void(0)">
							<?php
							echo esc_html__( 'Duplicate', 'booking' ); ?>
							<i class="menu_icon icon-1x wpbc_icn_content_copy"></i>
						</a>
					</li>
					<li class="divider"></li>
					<li>
						<a class="ul_dropdown_menu_li_action" data-action="remove" href="javascript:void(0)">
							<?php
							echo esc_html__( 'Remove', 'booking' ); ?>
							<i class="menu_icon icon-1x wpbc_icn_delete_outline"></i>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</script>

	<?php
}

/**
 * (Optional) Register the "Select" palette item in "general/bottom".
 *
 * @param string $group    Palette group: 'general' | 'advanced' | ...
 * @param string $position Position: 'top' | 'bottom'
 *
 * @return void
 */
function wpbc_bfb_palette_register_items__select_wptpl( $group, $position ) {

	if ( 'standard' !== $group || 'bottom' !== $position ) {
		return;
	}
	?>
	<li class="wpbc_bfb__field"
		data-id="select"
		data-type="select"
		data-usage_key="select"
		data-label="<?php
		echo esc_attr( __( 'Select', 'booking' ) ); ?>">
		<i class="menu_icon icon-1x wpbc-bi-menu-button-fill bi-menu-button-wide-fill -bi-menu-down "></i>
		<span class="wpbc_bfb__field-label"><?php
			echo esc_html( __( 'Dropdown', 'booking' ) ); ?></span>
		<span class="wpbc_bfb__field-type">selectbox</span>
	</li>
	<?php
}

add_action( 'wpbc_bfb_palette_register_items', 'wpbc_bfb_palette_register_items__select_wptpl', 10, 2 );

```