"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 = $('