https://campus.ibernex.es//lib/javascript/Educativa/Modules/Aula/Components/DropdownSearchable.js?v=1780286490

1/***********************************************************/
2/*                                                         */
3/* Plataforma e-ducativa - Argentina                       */
4/*                                                         */
5/* Copyright (c) 2026 de e-ducativa Educación Virtual S.A. */
6/*                                                         */
7/***********************************************************/
8/**
9 * @class
10 * @classdesc Clase wraper que implementa la libreria Choices para armar un combo o
11 * lista deplegable donde se pueden buscar opciones para seleccionar
12 *
13 * @requires Choices de choices/choices.js
14 * @requires choices.css Archivo css necesario para que se renderice correctamente
15 */
16class DropdownSearchable {
17    /**
18     * Clases que define la libreria {@link https://github.com/Choices-js/Choices/tree/v9.0.1#classNames Choices}.
19     * Estan solamente las que se usan actualmente en el campus
20     */
21    static classNamesDefaults = {
22        listSingle: 'choices__list--single',
23        containerOuter: 'choices',
24    };
25
26    /**
27     * {@link https://github.com/Choices-js/Choices#configuration-options Configuration options (see current version)}
28     *
29     * @param {HTMLElement} element Elemento relacionado a la lista desplegable renderizada por Choices
30     * @param {Object} options  Para ver todas las opciones disponibles ver el link "Configuration options" en la descripcion
31     */
32    constructor (element, options) {
33        this._element = element;
34
35        // Opciones configurables que son usadas actualmente en el campus
36        this._options = {
37            itemSelectText: options.itemSelectText,
38            // La opciones (options.choices) deben venir ordenadas
39            shouldSort: false,
40            noResultsText: options.noResultsText,
41            searchPlaceholderValue: options.searchPlaceholderValue,
42            choices: options.choices,
43            searchFields: options.searchFields || ['label'],
44        };
45
46        // La cantidad de resultados debe ser el total de opciones seleccionables. El default es 4
47        if (options.searchResultLimit) {
48            this._options.searchResultLimit = options.searchResultLimit;
49        }
50
51        if (options.position) {
52            this._options.position = options.position;
53        }
54
55        if (options.callbackOnCreateTemplates) {
56            this._options.callbackOnCreateTemplates = options.callbackOnCreateTemplates;
57        }
58
59        if (options.hasOwnProperty('searchEnabled')) {
60            this._options.searchEnabled = options.searchEnabled;
61        }
62
63        if (options.hasOwnProperty('resetScrollPosition')) {
64            this._options.resetScrollPosition = options.resetScrollPosition;
65        }
66
67        if (options.classNames) {
68            this._options.classNames = options.classNames;
69        }
70    }
71
72    render() {
73        this._instance = new Choices(this._element, this._options);
74    }
75
76    /**
77     *
78     * @returns Instancia de new Choices()
79     */
80    getInstance() {
81        return this._instance;
82    }
83
84    setChoiceByValue(value) {
85        this.getInstance().setChoiceByValue(value);
86    }
87
88    /**
89     * @method addEvent
90     *
91     * @description Permite agregar eventos personalizados propios de Choices
92     *
93     * @see {@link https://github.com/Choices-js/Choices/tree/v9.0.1#events Eventos de Choices.js}
94     *
95     * @param {String} eventName Nombre del evento
96     * @param {Callback} functionCallback
97     */
98    addEvent(eventName = '', functionCallback) {
99        // Si se quieren usar mas eventos, se debe agregar al array
100        const eventsUsedToday = ['addItem'];
101
102        if (!eventsUsedToday.includes(eventName)) {
103            console.warn('Error: Evento no permitido');
104            return;
105        }
106
107        this.getInstance().passedElement.element.addEventListener(eventName, functionCallback, false);
108    }
109
110    disable() {
111        this.getInstance().disable();
112    }
113
114    enable() {
115        this.getInstance().enable();
116    }
117
118    hidePlaceholderInList() {
119        const parentNode = this._element.parentNode;
120        const selector = `#${parentNode.id}`;
121        const styles = `${selector} .choices__list--dropdown .choices__placeholder { display: none; }`;
122
123        const style = document.createElement('style');
124        style.innerHTML = styles;
125
126        parentNode.insertAdjacentElement('beforebegin', style);
127    }
128}
129
130// Asignacion global para compatibilidad con consumidores legacy que no usan ES6 import
131// (DropdownSearchableInit.js, GestionUnidades.js).
132// Puede eliminarse cuando esos consumidores migren a ES6 modules.
133window.DropdownSearchable = DropdownSearchable;
134
135export { DropdownSearchable };