Filter for change the text content of element?

Hello Bricks Team,

this is a code from filter-active-filters.php

<?php
namespace Bricks;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class Filter_Active_Filters extends Filter_Element {
	public $name        = 'filter-active-filters';
	public $icon        = 'ti-filter';
	public $filter_type = 'active-filters';

	public function get_label() {
		return esc_html__( 'Filter', 'bricks' ) . ' - ' . esc_html__( 'Active Filters', 'bricks' );
	}

	public function set_controls() {
		// SORT / FILTER
		$filter_controls = $this->get_filter_controls();

		if ( ! empty( $filter_controls ) ) {
			unset( $filter_controls['filterApplyOn'] );
			unset( $filter_controls['filterNiceName'] );
			$this->controls = array_merge( $this->controls, $filter_controls );
		}

		$this->controls['excludeIds'] = [
			'type'           => 'text',
			'label'          => esc_html__( 'Exclude filter IDs', 'bricks' ),
			'description'    => esc_html__( 'Enter Bricks IDs, separated by comma, of filter elements to exclude.', 'bricks' ),
			'placeholder'    => 'q1w2e3,mn9456',
			'required'       => [ 'filterQueryId', '!=', '' ],
			'hasDynamicData' => false,
		];

		// BUTTON
		$this->controls['buttonSep'] = [
			'label' => esc_html__( 'Button', 'bricks' ),
			'type'  => 'separator',
		];

		$this->controls['buttonPadding'] = [
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'css'   => [
				[
					'property' => 'padding',
					'selector' => '.bricks-button',
				],
			],
		];

		$this->controls['buttonGap'] = [
			'label' => esc_html__( 'Gap', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => [
				[
					'property' => 'gap',
					'selector' => '',
				],
			],
		];

		$this->controls['buttonSize'] = [
			'label'       => esc_html__( 'Size', 'bricks' ),
			'type'        => 'select',
			'options'     => $this->control_options['buttonSizes'],
			'inline'      => true,
			'placeholder' => esc_html__( 'Default', 'bricks' ),
		];

		$this->controls['buttonStyle'] = [
			'label'       => esc_html__( 'Style', 'bricks' ),
			'type'        => 'select',
			'options'     => $this->control_options['styles'],
			'inline'      => true,
			'placeholder' => esc_html__( 'None', 'bricks' ),
		];

		$this->controls['buttonCircle'] = [
			'label' => esc_html__( 'Circle', 'bricks' ),
			'type'  => 'checkbox',
		];

		$this->controls['buttonOutline'] = [
			'label' => esc_html__( 'Outline', 'bricks' ),
			'type'  => 'checkbox',
		];

		$this->controls['buttonBackgroundColor'] = [
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'css'   => [
				[
					'property' => 'background-color',
					'selector' => '.bricks-button',
				],
			],
		];

		$this->controls['buttonBorder'] = [
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => [
				[
					'property' => 'border-color',
					'selector' => '.bricks-button',
				],
			],
		];

		$this->controls['buttonTypography'] = [
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => [
				[
					'property' => 'font',
					'selector' => '.bricks-button',
				],
			],
		];

		// ICON
		$this->controls['iconSeparator'] = [
			'label' => esc_html__( 'Icon', 'bricks' ),
			'type'  => 'separator',
		];

		$this->controls['icon'] = [
			'label' => esc_html__( 'Icon', 'bricks' ),
			'type'  => 'icon',
		];

		$this->controls['iconColor'] = [
			'label'    => esc_html__( 'Color', 'bricks' ),
			'type'     => 'color',
			'css'      => [
				[
					'property' => 'color',
					'selector' => '.bricks-button i',
				],
				[
					'property' => 'fill',
					'selector' => '.bricks-button svg path',
				],
			],
			'required' => [ 'icon.icon', '!=', '' ],
		];

		$this->controls['iconSize'] = [
			'label'    => esc_html__( 'Size', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => [
				[
					'property' => 'font-size',
					'selector' => '.bricks-button .icon',
				],
			],
			'required' => [ 'icon.icon', '!=', '' ],
		];

		$this->controls['iconGap'] = [
			'label'    => esc_html__( 'Gap', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => [
				[
					'property' => 'gap',
					'selector' => '.bricks-button',
				],
			],
			'required' => [ 'icon', '!=', '' ],
		];

		$this->controls['iconPosition'] = [
			'label'       => esc_html__( 'Position', 'bricks' ),
			'type'        => 'select',
			'options'     => $this->control_options['iconPosition'],
			'inline'      => true,
			'placeholder' => esc_html__( 'Right', 'bricks' ),
			'required'    => [ 'icon', '!=', '' ],
		];
	}

	private function set_as_filter() {
		$settings = $this->settings;

		// Insert filter settings as data-brx-filter attribute
		$filter_settings = $this->get_common_filter_settings();
		$this->set_attribute( '_root', 'data-brx-filter', wp_json_encode( $filter_settings ) );
	}

	public function render() {
		$settings = $this->settings;

		if ( $this->is_filter_input() ) {
			$this->set_as_filter();
		}

		$target_query_id = $settings['filterQueryId'] ?? false;

		// Return: No target query ID selected
		if ( ! $target_query_id ) {
			return $this->render_element_placeholder(
				[
					'title' => esc_html__( 'No target query selected.', 'bricks' ),
				]
			);
		}

		$exclude_ids = $settings['excludeIds'] ?? false;

		if ( $exclude_ids ) {
			$exclude_ids = array_map(
				function( $id ) {
					// remove whitespace
					$id = trim( $id );
					// remove brxe- prefix if exists
					$id = str_replace( 'brxe-', '', $id );
					// remove hash if exists
					return str_replace( '#', '', $id );
				},
				explode( ',', $exclude_ids )
			);
		}

		$active_filters = Query_Filters::$active_filters[ $target_query_id ] ?? [];

		$this->set_attribute( '_remove', 'class', 'bricks-button' );

		$items = [];

		// In builder preview, populate a fake item for testing
		if (
			bricks_is_builder_main() ||
			bricks_is_builder_iframe() ||
			bricks_is_builder_call() ||
			isset( $_GET['bricks_preview'] )
		) {
			$items = [
				[
					'filter_id' => 'fake-filter-id',
					'value'     => 'fake-value',
					'label'     => esc_html__( 'Active filter', 'bricks' ),
				],
				[
					'filter_id' => 'fake-filter-id-2',
					'value'     => 'fake-value-2',
					'label'     => esc_html__( 'Active filter', 'bricks' ) . ' (2)',
				],
			];
		}

		// Actual frontend, generate items for active filters
		elseif ( ! empty( $active_filters ) ) {
			$generated_urls = [];
			foreach ( $active_filters as $filter_info ) {
				$value         = $filter_info['value'];
				$filter_id     = $filter_info['filter_id'];
				$instance_name = $filter_info['instance_name'];
				$url_param     = $filter_info['url_param'];

				// Skip excluded filter IDs
				if ( $exclude_ids && in_array( $filter_id, $exclude_ids ) ) {
					continue;
				}

				// Skip pagination filter (no need to show it in active filters)
				if ( $instance_name === 'pagination' ) {
					continue;
				}

				// Skip if the filter for this url param is already generated (@since 1.12)
				if ( $url_param && in_array( $url_param, $generated_urls ) ) {
					continue;
				}

				$choices = Query_Filters::get_filtered_data_from_index( $filter_id, Query_Filters::get_filter_object_ids( $target_query_id, 'original' ) );

				if ( is_array( $value ) && $instance_name === 'filter-checkbox' ) {
					// Checkbox filter shows 1 button for each selected value
					foreach ( $value as $val ) {
						$item = $this->get_item( $filter_id, $val, $choices, $filter_info );
						if ( is_array( $item ) ) {
							$items[] = $item;
						}
					}
				} else {
					// Other filter types show 1 button for each filter
					$item = $this->get_item( $filter_id, $value, $choices, $filter_info );
					if ( is_array( $item ) ) {
						$items[] = $item;
					}
				}

				// Add url param to generated urls
				$generated_urls[] = $url_param;
			}
		}

		// Button classes
		$button_classes = [ 'bricks-button' ];

		if ( isset( $settings['buttonSize'] ) ) {
			$button_classes[] = $settings['buttonSize'];
		}

		if ( isset( $settings['buttonOutline'] ) ) {
			$button_classes[] = 'outline';
		}

		if ( isset( $settings['buttonStyle'] ) ) {
			if ( isset( $settings['buttonOutline'] ) ) {
				$button_classes[] = "bricks-color-{$settings['buttonStyle']}";
			} else {
				$button_classes[] = "bricks-background-{$settings['buttonStyle']}";
			}
		}

		if ( isset( $settings['buttonCircle'] ) ) {
			$button_classes[] = 'circle';
		}

		// Icon
		$icon          = ! empty( $settings['icon'] ) ? self::render_icon( $settings['icon'], [ 'icon' ] ) : false;
		$icon_position = ! empty( $settings['iconPosition'] ) ? $settings['iconPosition'] : 'right';

		echo "<ul {$this->render_attributes('_root')}>";

		foreach ( $items as $k => $item ) {
			$filter_id  = esc_attr( $item['filter_id'] );
			$value      = esc_attr( $item['value'] );
			$label      = esc_attr( $item['label'] );
			$title      = isset( $item['title'] ) ? esc_attr( $item['title'] ) : '';
			$unique_key = $filter_id . '-' . $k;
			$url_param  = isset( $item['url_param'] ) ? sanitize_key( $item['url_param'] ) : '';

			$this->set_attribute( "item_button_$unique_key", 'aria-label', esc_html__( 'Clear filter', 'bricks' ) );
			$this->set_attribute( "item_button_$unique_key", 'class', $button_classes );
			$this->set_attribute( "item_button_$unique_key", 'data-filter-id', $filter_id );
			$this->set_attribute( "item_button_$unique_key", 'data-filter-value', $value );
			$this->set_attribute( "item_button_$unique_key", 'data-filter-url-param', $url_param );

			if ( $title ) {
				$this->set_attribute( "item_button_$unique_key", 'title', $item['title'] );
			}

			$button_inner = $label;

			if ( $icon ) {
				$button_inner = $icon_position === 'left' ? $icon . $button_inner : $button_inner . $icon;
			}

			echo "<li {$this->render_attributes( 'item_'. $unique_key )}>";

			echo "<button {$this->render_attributes( 'item_button_'. $unique_key )}>{$button_inner}</button>";

			echo '</li>';
		}

		echo '</ul>';
	}

	/**
	 * Generate items for active filters
	 *
	 * @return array
	 */
	private function get_item( $filter_id, $value, $choices, $filter_info ) {
		$settings      = $filter_info['settings'];
		$instance_name = $filter_info['instance_name'];
		$url_param     = $filter_info['url_param'];
		$filter_action = $settings['filterAction'] ?? 'filter';

		if ( $filter_action === 'filter' ) {
			// Handle range filter - Use labelMin and labelMax
			if ( in_array( $instance_name, [ 'filter-range' ] ) ) {
				$min_label       = $settings['labelMin'] ?? '';
				$max_label       = $settings['labelMax'] ?? '';
				$mode            = $settings['displayMode'] ?? 'range';
				$separator       = $settings['labelThousandSeparator'] ?? false;
				$sep_label       = $settings['labelSeparatorText'] ?? ',';
				$use_sep         = $mode === 'range' && $separator; // Only use separator if mode is range
				$label_direction = $settings['labelDirection'] ?? false; // @since 1.12.2

				if ( is_array( $value ) ) {
					$min_label_value = $use_sep ? number_format( $value[0], 0, '.', $sep_label ) : $value[0];
					$max_label_value = $use_sep ? number_format( $value[1], 0, '.', $sep_label ) : $value[1];

					// Set label direction based on the filter setting (@since 1.12.2)
					if ( $label_direction === 'row-reverse' ) {
						$label = "{$min_label_value} {$min_label} - {$max_label_value} {$max_label}";
					} else {
						$label = "{$min_label} {$min_label_value} - {$max_label} {$max_label_value}";
					}

					$value = $value[0]; // Change the value to min value only - no array value
				} else {
					// Thousand separator
					$label_value = $use_sep ? number_format( $value, 0, '.', $sep_label ) : $value;

					// Set label direction based on the filter setting (@since 1.12.2)
					$label = $label_direction === 'row-reverse' ? "{$label_value} {$min_label}" : "{$min_label} {$label_value}";
				}
			}

			// Handle datepicker filter
			elseif ( in_array( $instance_name, [ 'filter-datepicker' ] ) ) {
				$placeholder = ! empty( $settings['placeholder'] ) ? $this->render_dynamic_data( $settings['placeholder'] ) : '';
				if ( ! empty( $placeholder ) ) {
					$label = "{$placeholder} {$value}";
				}
			}

			// Handle other filter types
			else {

				// Try to use filter_value_display from index table as default label
				$data_matched_value = array_filter(
					$choices,
					function( $choice ) use ( $value ) {
						// DB value must use rawurldecode first when comparing with user input value (@since 1.12)
						return self::is_option_value_matched( esc_attr( rawurldecode( $choice['filter_value'] ) ), esc_attr( $value ) );
					}
				);

				// Get the first data matched value
				$data_matched_value = array_shift( $data_matched_value );
				// Set default label, use value from db, otherwise must be escaped as it's user input
				$label = $data_matched_value['filter_value_display'] ?? esc_attr( $value );
				// Always use value from db so frontend JS can deselect the correct option when clicking on the button (@since 1.12)
				$value = $data_matched_value['filter_value'] ?? $value;

				// Handle other filter types with filterSource (Search filter has no filterSource)
				if ( ( ! empty( $settings['filterSource'] ) ) ) {
					switch ( $settings['filterSource'] ) {
						case 'taxonomy':
							// Use default filter_value_display as label
							break;

						case 'wpField':
						case 'customField':
							$label_mapping        = $settings['labelMapping'] ?? 'value';
							$custom_label_mapping = $settings['customLabelMapping'] ?? [];

							// Use custom label mapping if set
							if ( $label_mapping === 'custom' && ! empty( $custom_label_mapping ) ) {
								// Find the label from the custom_label_mapping array
								$selected_label_mapping = array_filter(
									$custom_label_mapping,
									function( $mapping ) use ( $value ) {
										return self::is_option_value_matched( $mapping['optionMetaValue'], $value );
									}
								);

								$selected_label_mapping = array_shift( $selected_label_mapping );

								$label = $selected_label_mapping['optionLabel'] ?? $value;
							}

							break;
					}
				}
			}
		}

		// Sort
		elseif ( $filter_action === 'sort' ) {
			// Only filter-select and filter-radio has sort options
			if ( ! in_array( $instance_name, [ 'filter-select', 'filter-radio' ], true ) ) {
				return false;
			}

			// sort_option_info is the option of the selected value defined in the builder. This info populated and saved in Query_Filters::$active_filters when executing Query_Filters::generate_query_vars_from_active_filters() function
			$sort_info = ! empty( $filter_info['sort_option_info'] ) ? $filter_info['sort_option_info'] : false;

			// Ensure sort options and sort info are available
			if ( $sort_info ) {
				$label = $sort_info['optionLabel'] ?? $value;
			}
		}

		// Per page
		else {
			// Only filter-select and filter-radio has sort options
			if ( ! in_array( $instance_name, [ 'filter-select', 'filter-radio' ], true ) ) {
				return false;
			}

			// No per page options, the value is not matched with any per page options
			if ( empty( $filter_info['per_page_options'] ) || ! in_array( $value, $filter_info['per_page_options'] ) ) {
				return false;
			}

			$label = (int) $value;
			$value = (int) $value;
		}

		// Add active filter prefix, suffix or title attribute
		$title = '';

		if ( isset( $settings['filterActivePrefix'] ) ) {
			$label = esc_attr( $this->render_dynamic_data( $settings['filterActivePrefix'] ) ) . $label;
		}

		if ( isset( $settings['filterActiveSuffix'] ) ) {
			$label = $label . esc_attr( $this->render_dynamic_data( $settings['filterActiveSuffix'] ) );
		}

		if ( isset( $settings['filterActiveTitle'] ) ) {
			$title = esc_attr( $this->render_dynamic_data( $settings['filterActiveTitle'] ) );
		}

		return [
			'filter_id' => $filter_id,
			'value'     => $value,
			'label'     => $label,
			'title'     => $title,
			'url_param' => $url_param,
		];
	}
}

we already know, we can adjust the attribute of element using bricks/element/render_attributes, but how can we change the text content?

an example is the $button_inner at the render() method from the above code.

Thank you