"use strict";
class Multi_Select extends Component {
on_ready() {
this.selected_values = this.args.value || [];
this.all_options = this.args.options || [];
if (this.all_options.length > 0) {
this.render_options(this.all_options);
}
// Search functionality
const $search = this.$sid('search');
$search.on('input', e => {
this.filter_options(e.target.value);
});
// Prevent dropdown close when clicking inside
this.$sid('menu').on('click', e => {
e.stopPropagation();
});
// Clear/Select all buttons
this.$sid('clear_all').on('click', () => {
this.clear_all();
});
this.$sid('select_all').on('click', () => {
this.select_all();
});
// Update display
this.update_display();
}
render_options(options) {
const $container = this.$sid('options');
$container.empty();
if (options.length === 0) {
$container.append($('
').addClass('px-3 py-2 text-muted').text('No options found'));
return;
}
options.forEach(option => {
const $label = $('