/* eslint-disable no-return-assign */
import { queryOne } from '@ecl/dom-utils';
import getSystem from '@ecl/builder/utils/getSystem';
import EventManager from '@ecl/event-manager';
import iconSvgAllCheck from '@ecl/resources-icons/dist/svg/all/check.svg';
import iconSvgAllCornerArrow from '@ecl/resources-icons/dist/svg/all/corner-arrow.svg';
const system = getSystem();
const iconSize = system === 'eu' ? 's' : 'xs';
/**
* This API mostly refers to the multiple select, in the default select only two methods are actually used:
* handleKeyboardOnSelect() and handleOptgroup().
*
* For the multiple select there are multiple labels contained in this component. You can set them in 2 ways:
* directly as a string or through data attributes.
* Textual values have precedence and if they are not provided, then DOM data attributes are used.
*
* @param {HTMLElement} element DOM element for component instantiation and scope
* @param {Object} options
* @param {String} options.defaultText The default placeholder
* @param {String} options.searchText The label for search
* @param {String} options.selectAllText The label for select all
* @param {String} options.selectMultipleSelector The data attribute selector of the select multiple
* @param {String} options.defaultTextAttribute The data attribute for the default placeholder text
* @param {String} options.searchTextAttribute The data attribute for the default search text
* @param {String} options.selectAllTextAttribute The data attribute for the select all text
* @param {String} options.noResultsTextAttribute The data attribute for the no results options text
* @param {String} options.closeLabelAttribute The data attribute for the close button
* @param {String} options.clearAllLabelAttribute The data attribute for the clear all button
* @param {String} options.selectMultiplesSelectionCountSelector The selector for the counter of selected options
* @param {String} options.closeButtonLabel The label of the close button
* @param {String} options.clearAllButtonLabel The label of the clear all button
*/
export class Select {
/**
* @static
* Shorthand for instance creation and initialisation.
*
* @param {HTMLElement} root DOM element for component instantiation and scope
*
* @return {Select} An instance of Select.
*/
static autoInit(root, defaultOptions = {}) {
const select = new Select(root, defaultOptions);
select.init();
root.ECLSelect = select;
return select;
}
/**
* @event Select#onToggle
*/
/**
* @event Select#onSelection
*/
/**
* @event Select#onSelectAll
*/
/**
* @event Select#onReset
*/
/**
* @event Select#onSearch
*
*/
supportedEvents = [
'onToggle',
'onSelection',
'onSelectAll',
'onReset',
'onSearch',
];
constructor(
element,
{
defaultText = '',
searchText = '',
selectAllText = '',
noResultsText = '',
selectMultipleSelector = '[data-ecl-select-multiple]',
defaultTextAttribute = 'data-ecl-select-default',
searchTextAttribute = 'data-ecl-select-search',
selectAllTextAttribute = 'data-ecl-select-all',
noResultsTextAttribute = 'data-ecl-select-no-results',
closeLabelAttribute = 'data-ecl-select-close',
clearAllLabelAttribute = 'data-ecl-select-clear-all',
selectMultiplesSelectionCountSelector = 'ecl-select-multiple-selections-counter',
closeButtonLabel = '',
clearAllButtonLabel = '',
} = {},
) {
// Check element
if (!element || element.nodeType !== Node.ELEMENT_NODE) {
throw new TypeError(
'DOM element should be given to initialize this widget.',
);
}
this.element = element;
this.eventManager = new EventManager();
// Options
this.selectMultipleSelector = selectMultipleSelector;
this.selectMultiplesSelectionCountSelector =
selectMultiplesSelectionCountSelector;
this.defaultTextAttribute = defaultTextAttribute;
this.searchTextAttribute = searchTextAttribute;
this.selectAllTextAttribute = selectAllTextAttribute;
this.noResultsTextAttribute = noResultsTextAttribute;
this.defaultText = defaultText;
this.searchText = searchText;
this.selectAllText = selectAllText;
this.noResultsText = noResultsText;
this.clearAllButtonLabel = clearAllButtonLabel;
this.closeButtonLabel = closeButtonLabel;
this.closeLabelAttribute = closeLabelAttribute;
this.clearAllLabelAttribute = clearAllLabelAttribute;
// Private variables
this.input = null;
this.search = null;
this.checkboxes = null;
this.select = null;
this.selectAll = null;
this.selectIcon = null;
this.textDefault = null;
this.textSearch = null;
this.textSelectAll = null;
this.textNoResults = null;
this.selectMultiple = null;
this.inputContainer = null;
this.optionsContainer = null;
this.visibleOptions = null;
this.searchContainer = null;
this.countSelections = null;
this.form = null;
this.formGroup = null;
this.label = null;
this.helper = null;
this.invalid = null;
this.selectMultipleId = null;
this.multiple =
queryOne(this.selectMultipleSelector, this.element.parentNode) || false;
this.isOpen = false;
// Bind `this` for use in callbacks
this.handleToggle = this.handleToggle.bind(this);
this.handleClickOption = this.handleClickOption.bind(this);
this.handleClickSelectAll = this.handleClickSelectAll.bind(this);
this.handleEsc = this.handleEsc.bind(this);
this.handleFocusout = this.handleFocusout.bind(this);
this.handleSearch = this.handleSearch.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
this.resetForm = this.resetForm.bind(this);
this.handleClickOnClearAll = this.handleClickOnClearAll.bind(this);
this.handleKeyboardOnSelect = this.handleKeyboardOnSelect.bind(this);
this.handleKeyboardOnSelectAll = this.handleKeyboardOnSelectAll.bind(this);
this.handleKeyboardOnSearch = this.handleKeyboardOnSearch.bind(this);
this.handleKeyboardOnOptions = this.handleKeyboardOnOptions.bind(this);
this.handleKeyboardOnOption = this.handleKeyboardOnOption.bind(this);
this.handleKeyboardOnClearAll = this.handleKeyboardOnClearAll.bind(this);
this.handleKeyboardOnClose = this.handleKeyboardOnClose.bind(this);
this.setCurrentValue = this.setCurrentValue.bind(this);
this.update = this.update.bind(this);
}
/**
* Static method to create an svg icon.
*
* @static
* @private
* @returns {HTMLElement}
*/
static #createSvgIcon(icon, classes) {
const tempElement = document.createElement('div');
tempElement.innerHTML = icon; // avoiding the use of not-so-stable createElementNs
const svg = tempElement.children[0];
svg.removeAttribute('height');
svg.removeAttribute('width');
svg.setAttribute('focusable', false);
svg.setAttribute('aria-hidden', true);
// The following element is <path> which does not support classList API as others.
svg.setAttribute('class', classes);
return svg;
}
/**
* Static method to create a checkbox element.
*
* @static
* @param {Object} options
* @param {String} options.id
* @param {String} options.text
* @param {String} [options.extraClass] - additional CSS class
* @param {String} [options.disabled] - relevant when re-creating an option
* @param {String} [options.selected] - relevant when re-creating an option
* @param {String} ctx
* @private
* @returns {HTMLElement}
*/
static #createCheckbox(options, ctx) {
// Early returns.
if (!options || !ctx) return '';
const { id, text, disabled, selected, extraClass } = options;
if (!id || !text) return '';
// Elements to work with.
const checkbox = document.createElement('div');
const input = document.createElement('input');
const label = document.createElement('label');
const box = document.createElement('span');
const labelText = document.createElement('span');
// Respect optional input parameters.
if (extraClass) {
checkbox.classList.add(extraClass);
}
if (selected) {
input.setAttribute('checked', true);
}
if (disabled) {
checkbox.classList.add('ecl-checkbox--disabled');
box.classList.add('ecl-checkbox__box--disabled');
input.setAttribute('disabled', disabled);
}
// Imperative work follows.
checkbox.classList.add('ecl-checkbox');
checkbox.setAttribute('data-select-multiple-value', text);
input.classList.add('ecl-checkbox__input');
input.setAttribute('type', 'checkbox');
input.setAttribute('id', `${ctx}-${id}`);
input.setAttribute('name', `${ctx}-${id}`);
checkbox.appendChild(input);
label.classList.add('ecl-checkbox__label');
label.setAttribute('for', `${ctx}-${id}`);
box.classList.add('ecl-checkbox__box');
box.setAttribute('aria-hidden', true);
box.appendChild(
Select.#createSvgIcon(
iconSvgAllCheck,
'ecl-icon ecl-icon--s ecl-checkbox__icon',
),
);
label.appendChild(box);
labelText.classList.add('ecl-checkbox__label-text');
labelText.innerHTML = text;
label.appendChild(labelText);
checkbox.appendChild(label);
return checkbox;
}
/**
* Static method to generate the select icon
*
* @static
* @private
* @returns {HTMLElement}
*/
static #createSelectIcon() {
const wrapper = document.createElement('div');
wrapper.classList.add('ecl-select__icon');
const button = document.createElement('button');
button.classList.add(
'ecl-button',
'ecl-button--ghost',
'ecl-button--icon-only',
);
button.setAttribute('tabindex', '-1');
const labelWrapper = document.createElement('span');
labelWrapper.classList.add('ecl-button__container');
const label = document.createElement('span');
label.classList.add('ecl-button__label');
label.textContent = 'Toggle dropdown';
labelWrapper.appendChild(label);
const icon = Select.#createSvgIcon(
iconSvgAllCornerArrow,
`ecl-icon ecl-icon--${iconSize} ecl-icon--rotate-180`,
);
labelWrapper.appendChild(icon);
button.appendChild(labelWrapper);
wrapper.appendChild(button);
return wrapper;
}
/**
* Static method to programmatically check an ECL-specific checkbox when previously default has been prevented.
*
* @static
* @param {Event} e
* @private
*/
static #checkCheckbox(e) {
const input = e.target.closest('.ecl-checkbox').querySelector('input');
input.checked = !input.checked;
return input.checked;
}
/**
* Static method to generate a random string
*
* @static
* @param {number} length
* @private
*/
static #generateRandomId(length) {
return Math.random().toString(36).substr(2, length);
}
/**
* Initialise component.
*/
init() {
if (!ECL) {
throw new TypeError('Called init but ECL is not present');
}
ECL.components = ECL.components || new Map();
this.select = this.element;
if (this.multiple) {
const containerClasses = Array.from(this.select.parentElement.classList);
this.textDefault =
this.defaultText ||
this.element.getAttribute(this.defaultTextAttribute);
this.textSearch =
this.searchText || this.element.getAttribute(this.searchTextAttribute);
this.textSelectAll =
this.selectAllText ||
this.element.getAttribute(this.selectAllTextAttribute);
this.textNoResults =
this.noResultsText ||
this.element.getAttribute(this.noResultsTextAttribute);
this.closeButtonLabel =
this.closeButtonLabel ||
this.element.getAttribute(this.closeLabelAttribute);
this.clearAllButtonLabel =
this.clearAllButtonLabel ||
this.element.getAttribute(this.clearAllLabelAttribute);
// Retrieve the id from the markup or generate one.
this.selectMultipleId =
this.element.id || `select-multiple-${Select.#generateRandomId(4)}`;
this.element.id = this.selectMultipleId;
this.formGroup = this.element.closest('.ecl-form-group');
if (this.formGroup) {
this.formGroup.setAttribute('role', 'application');
this.label = queryOne('.ecl-form-label', this.formGroup);
this.helper = queryOne('.ecl-help-block', this.formGroup);
this.invalid = queryOne('.ecl-feedback-message', this.formGroup);
}
// Disable focus on default select
this.select.setAttribute('tabindex', '-1');
this.selectMultiple = document.createElement('div');
this.selectMultiple.classList.add('ecl-select__multiple');
// Close the searchContainer when tabbing out of the selectMultiple
this.selectMultiple.addEventListener('focusout', this.handleFocusout);
this.inputContainer = document.createElement('div');
this.inputContainer.classList.add(...containerClasses);
this.selectMultiple.appendChild(this.inputContainer);
this.input = document.createElement('button');
this.input.classList.add('ecl-select', 'ecl-select__multiple-toggle');
this.input.setAttribute('type', 'button');
this.input.setAttribute(
'aria-controls',
`${this.selectMultipleId}-dropdown`,
);
this.input.setAttribute('id', `${this.selectMultipleId}-toggle`);
this.input.setAttribute('aria-expanded', false);
if (containerClasses.find((c) => c.includes('disabled'))) {
this.input.setAttribute('disabled', true);
}
// Add accessibility attributes
if (this.label) {
this.label.setAttribute('for', `${this.selectMultipleId}-toggle`);
this.input.setAttribute('aria-labelledby', this.label.id);
}
let describedby = '';
if (this.helper) {
describedby = this.helper.id;
}
if (this.invalid) {
describedby = describedby
? `${describedby} ${this.invalid.id}`
: this.invalid.id;
}
if (describedby) {
this.input.setAttribute('aria-describedby', describedby);
}
this.input.addEventListener('keydown', this.handleKeyboardOnSelect);
this.input.addEventListener('click', this.handleToggle);
this.selectionCount = document.createElement('div');
this.selectionCount.classList.add(
this.selectMultiplesSelectionCountSelector,
);
this.selectionCountText = document.createElement('span');
this.selectionCount.appendChild(this.selectionCountText);
this.inputContainer.appendChild(this.selectionCount);
this.inputContainer.appendChild(this.input);
this.inputContainer.appendChild(Select.#createSelectIcon());
this.searchContainer = document.createElement('div');
this.searchContainer.style.display = 'none';
this.searchContainer.classList.add(
'ecl-select__multiple-dropdown',
...containerClasses,
);
this.searchContainer.setAttribute(
'id',
`${this.selectMultipleId}-dropdown`,
);
this.selectMultiple.appendChild(this.searchContainer);
if (this.textSearch) {
this.search = document.createElement('input');
this.search.classList.add('ecl-text-input');
this.search.setAttribute('type', 'search');
this.search.setAttribute('placeholder', this.textSearch || '');
this.search.addEventListener('keyup', this.handleSearch);
this.search.addEventListener('search', this.handleSearch);
this.search.addEventListener('keydown', this.handleKeyboardOnSearch);
this.searchContainer.appendChild(this.search);
}
if (this.textSelectAll) {
const optionsCount = Array.from(this.select.options).filter(
(option) => !option.disabled,
).length;
this.selectAll = Select.#createCheckbox(
{
id: `all-${Select.#generateRandomId(4)}`,
text: `${this.textSelectAll} (${optionsCount})`,
extraClass: 'ecl-select__multiple-all',
},
this.selectMultipleId,
);
this.selectAll.addEventListener('click', this.handleClickSelectAll);
this.selectAll.addEventListener('keypress', this.handleClickSelectAll);
this.selectAll.addEventListener('change', this.handleClickSelectAll);
this.searchContainer.appendChild(this.selectAll);
}
this.optionsContainer = document.createElement('div');
this.optionsContainer.classList.add('ecl-select__multiple-options');
this.optionsContainer.setAttribute('aria-live', 'polite');
this.searchContainer.appendChild(this.optionsContainer);
// Toolbar
if (this.clearAllButtonLabel || this.closeButtonLabel) {
this.dropDownToolbar = document.createElement('div');
this.dropDownToolbar.classList.add('ecl-select-multiple-toolbar');
if (this.closeButtonLabel) {
this.closeButton = document.createElement('button');
this.closeButton.textContent = this.closeButtonLabel;
this.closeButton.classList.add('ecl-button', 'ecl-button--primary');
this.closeButton.addEventListener('click', this.handleEsc);
this.closeButton.addEventListener(
'keydown',
this.handleKeyboardOnClose,
);
if (this.dropDownToolbar) {
this.dropDownToolbar.appendChild(this.closeButton);
this.searchContainer.appendChild(this.dropDownToolbar);
this.dropDownToolbar.style.display = 'none';
}
}
if (this.clearAllButtonLabel) {
this.clearAllButton = document.createElement('button');
this.clearAllButton.textContent = this.clearAllButtonLabel;
this.clearAllButton.classList.add(
'ecl-button',
'ecl-button--secondary',
);
this.clearAllButton.addEventListener(
'click',
this.handleClickOnClearAll,
);
this.clearAllButton.addEventListener(
'keydown',
this.handleKeyboardOnClearAll,
);
this.dropDownToolbar.appendChild(this.clearAllButton);
}
}
if (this.selectAll) {
this.selectAll.addEventListener(
'keydown',
this.handleKeyboardOnSelectAll,
);
}
this.optionsContainer.addEventListener(
'keydown',
this.handleKeyboardOnOptions,
);
if (this.select.options && this.select.options.length > 0) {
this.checkboxes = Array.from(this.select.options).map((option) => {
let optgroup = '';
let checkbox = '';
if (option.parentNode.tagName === 'OPTGROUP') {
if (
!queryOne(
`fieldset[data-ecl-multiple-group="${option.parentNode.getAttribute(
'label',
)}"]`,
this.optionsContainer,
)
) {
optgroup = document.createElement('fieldset');
const title = document.createElement('legend');
title.classList.add('ecl-select__multiple-group__title');
title.innerHTML = option.parentNode.getAttribute('label');
optgroup.appendChild(title);
optgroup.setAttribute(
'data-ecl-multiple-group',
option.parentNode.getAttribute('label'),
);
optgroup.classList.add('ecl-select__multiple-group');
this.optionsContainer.appendChild(optgroup);
} else {
optgroup = queryOne(
`fieldset[data-ecl-multiple-group="${option.parentNode.getAttribute(
'label',
)}"]`,
this.optionsContainer,
);
}
}
if (option.selected) {
this.#updateSelectionsCount(1);
if (this.dropDownToolbar) {
this.dropDownToolbar.style.display = 'flex';
}
}
checkbox = Select.#createCheckbox(
{
// spread operator does not work in storybook context so we map 1:1
id: option.value,
text: option.text,
disabled: option.disabled,
selected: option.selected,
},
this.selectMultipleId,
);
checkbox.setAttribute('data-visible', true);
if (!checkbox.classList.contains('ecl-checkbox--disabled')) {
checkbox.addEventListener('click', this.handleClickOption);
checkbox.addEventListener('keydown', this.handleKeyboardOnOption);
}
if (optgroup) {
optgroup.appendChild(checkbox);
} else {
this.optionsContainer.appendChild(checkbox);
}
return checkbox;
});
} else {
this.checkboxes = [];
}
this.visibleOptions = this.checkboxes;
this.select.parentNode.parentNode.insertBefore(
this.selectMultiple,
this.select.parentNode.nextSibling,
);
this.select.parentNode.classList.add('ecl-select__container--hidden');
// Respect default selected options.
this.#updateCurrentValue();
this.form = this.element.closest('form');
if (this.form) {
this.form.addEventListener('reset', this.resetForm);
}
document.addEventListener('click', this.handleClickOutside);
} else {
// Simple select
this.#handleOptgroup();
this.select.addEventListener('keydown', this.handleKeyboardOnSelect);
}
// Set ecl initialized attribute
this.element.setAttribute('data-ecl-auto-initialized', 'true');
ECL.components.set(this.element, this);
}
/**
* Update instance.
*
* @param {Integer} i
*/
update(i) {
this.#updateCurrentValue();
this.#updateSelectionsCount(i);
}
/**
* Set the selected value(s) programmatically.
*
* @param {string | Array<string>} values - A string or an array of values or labels to set as selected.
* @param {string} [op='replace'] - The operation mode. Use 'add' to keep the previous selections.
* @throws {Error} Throws an error if an invalid operation mode is provided.
*
* @example
* // Replace current selection with new values
* setCurrentValue(['value1', 'value2']);
*
* // Add to current selection without clearing previous selections
* setCurrentValue(['value3', 'value4'], 'add');
*
*/
setCurrentValue(values, op = 'replace') {
if (op !== 'replace' && op !== 'add') {
throw new Error('Invalid operation mode. Use "replace" or "add".');
}
const valuesArray = typeof values === 'string' ? [values] : values;
Array.from(this.select.options).forEach((option) => {
if (op === 'replace') {
option.selected = false;
}
if (
valuesArray.includes(option.value) ||
valuesArray.includes(option.label)
) {
option.selected = true;
}
});
this.update();
}
/**
* Event callback to show/hide the dropdown
*
* @param {Event} e
* @fires Select#onToggle
* @type {function}
*/
handleToggle(e) {
if (e) {
e.preventDefault();
}
this.input.classList.toggle('ecl-select--active');
if (this.searchContainer.style.display === 'none') {
this.searchContainer.style.display = 'block';
this.input.setAttribute('aria-expanded', true);
this.isOpen = true;
} else {
this.searchContainer.style.display = 'none';
this.input.setAttribute('aria-expanded', false);
this.isOpen = false;
}
if (e) {
const eventData = { opened: this.isOpen, e };
this.trigger('onToggle', eventData);
}
}
/**
* Register a callback function for a specific event.
*
* @param {string} eventName - The name of the event to listen for.
* @param {Function} callback - The callback function to be invoked when the event occurs.
* @returns {void}
* @memberof Select
* @instance
*
* @example
* // Registering a callback for the 'onToggle' event
* select.on('onToggle', (event) => {
* console.log('Toggle event occurred!', event);
* });
*/
on(eventName, callback) {
this.eventManager.on(eventName, callback);
}
/**
* Trigger a component event.
*
* @param {string} eventName - The name of the event to trigger.
* @param {any} eventData - Data associated with the event.
* @memberof Select
* @instance
*
*/
trigger(eventName, eventData) {
this.eventManager.trigger(eventName, eventData);
}
/**
* Destroy the component instance.
*/
destroy() {
this.input.removeEventListener('keydown', this.handleKeyboardOnSelect);
if (this.multiple) {
document.removeEventListener('click', this.handleClickOutside);
this.selectMultiple.removeEventListener('focusout', this.handleFocusout);
this.input.removeEventListener('click', this.handleToggle);
if (this.search) {
this.search.removeEventListener('keyup', this.handleSearch);
this.search.removeEventListener('keydown', this.handleKeyboardOnSearch);
}
if (this.selectAll) {
this.selectAll.removeEventListener('click', this.handleClickSelectAll);
this.selectAll.removeEventListener(
'keypress',
this.handleClickSelectAll,
);
this.selectAll.removeEventListener(
'keydown',
this.handleKeyboardOnSelectAll,
);
}
this.optionsContainer.removeEventListener(
'keydown',
this.handleKeyboardOnOptions,
);
this.checkboxes.forEach((checkbox) => {
checkbox.removeEventListener('click', this.handleClickSelectAll);
checkbox.removeEventListener('click', this.handleClickOption);
checkbox.removeEventListener('keydown', this.handleKeyboardOnOption);
});
if (this.closeButton) {
this.closeButton.removeEventListener('click', this.handleEsc);
this.closeButton.removeEventListener(
'keydown',
this.handleKeyboardOnClose,
);
}
if (this.clearAllButton) {
this.clearAllButton.removeEventListener(
'click',
this.handleClickOnClearAll,
);
this.clearAllButton.removeEventListener(
'keydown',
this.handleKeyboardOnClearAll,
);
}
if (this.selectMultiple) {
this.selectMultiple.remove();
}
this.select.parentNode.classList.remove('ecl-select__container--hidden');
}
if (this.element) {
this.element.removeAttribute('data-ecl-auto-initialized');
ECL.components.delete(this.element);
}
}
/**
* Private method to handle the update of the selected options counter.
*
* @param {Integer} i
* @private
*/
#updateSelectionsCount(i) {
let selectedOptionsCount = 0;
if (i > 0) {
this.selectionCount.querySelector('span').innerHTML += i;
} else {
selectedOptionsCount = Array.from(this.select.options).filter(
(option) => option.selected,
).length;
}
if (selectedOptionsCount > 0) {
this.selectionCount.querySelector('span').innerHTML =
selectedOptionsCount;
this.selectionCount.classList.add(
'ecl-select-multiple-selections-counter--visible',
);
if (this.dropDownToolbar) {
this.dropDownToolbar.style.display = 'flex';
}
} else {
this.selectionCount.classList.remove(
'ecl-select-multiple-selections-counter--visible',
);
if (this.dropDownToolbar) {
this.dropDownToolbar.style.display = 'none';
}
}
if (selectedOptionsCount >= 100) {
this.selectionCount.classList.add(
'ecl-select-multiple-selections-counter--xxl',
);
}
}
/**
* Private method to handle optgroup in single select.
*
* @private
*/
#handleOptgroup() {
Array.from(this.select.options).forEach((option) => {
if (option.parentNode.tagName === 'OPTGROUP') {
const groupLabel = option.parentNode.getAttribute('label');
const optionLabel = option.getAttribute('label') || option.textContent;
if (groupLabel && optionLabel) {
option.setAttribute('aria-label', `${optionLabel} - ${groupLabel}`);
}
}
});
}
/**
* Private method to update the select value.
*
* @fires Select#onSelection
* @private
*/
#updateCurrentValue() {
const optionSelected = Array.from(this.select.options)
.filter((option) => option.selected) // do not rely on getAttribute as it does not work in all cases
.map((option) => option.text)
.join(', ');
this.input.innerHTML = optionSelected || this.textDefault || '';
if (optionSelected !== '' && this.label) {
this.label.setAttribute(
'aria-label',
`${this.label.innerText} ${optionSelected}`,
);
} else if (optionSelected === '' && this.label) {
this.label.removeAttribute('aria-label');
}
this.trigger('onSelection', { selected: optionSelected });
// Dispatch a change event once the value of the select has changed.
this.select.dispatchEvent(new window.Event('change', { bubbles: true }));
}
/**
* Private method to handle the focus switch.
*
* @param {upOrDown}
* @param {loop}
* @private
*/
#moveFocus(upOrDown) {
const activeEl = document.activeElement;
const hasGroups = activeEl.parentElement.parentElement.classList.contains(
'ecl-select__multiple-group',
);
const options = !hasGroups
? Array.from(
activeEl.parentElement.parentElement.querySelectorAll(
'.ecl-checkbox__input',
),
)
: Array.from(
activeEl.parentElement.parentElement.parentElement.querySelectorAll(
'.ecl-checkbox__input',
),
);
const activeIndex = options.indexOf(activeEl);
if (upOrDown === 'down') {
const nextSiblings = options
.splice(activeIndex + 1, options.length)
.filter(
(el) => !el.disabled && el.parentElement.style.display !== 'none',
);
if (nextSiblings.length > 0) {
nextSiblings[0].focus();
} else {
// eslint-disable-next-line no-lonely-if
if (
this.dropDownToolbar &&
this.dropDownToolbar.style.display === 'flex'
) {
this.dropDownToolbar.firstChild.focus();
}
}
} else {
const previousSiblings = options
.splice(0, activeIndex)
.filter(
(el) => !el.disabled && el.parentElement.style.display !== 'none',
);
if (previousSiblings.length > 0) {
previousSiblings[previousSiblings.length - 1].focus();
} else {
this.optionsContainer.scrollTop = 0;
if (this.selectAll && !this.selectAll.querySelector('input').disabled) {
this.selectAll.querySelector('input').focus();
} else if (this.search) {
this.search.focus();
} else {
this.input.focus();
this.handleToggle();
}
}
}
}
/**
* Event callback to handle the click on a checkbox.
*
* @param {Event} e
* @type {function}
*/
handleClickOption(e) {
e.preventDefault();
Select.#checkCheckbox(e);
// Toggle values
const checkbox = e.target.closest('.ecl-checkbox');
Array.from(this.select.options).forEach((option) => {
if (option.text === checkbox.getAttribute('data-select-multiple-value')) {
if (option.getAttribute('selected') || option.selected) {
option.selected = false;
if (this.selectAll) {
this.selectAll.querySelector('input').checked = false;
}
} else {
option.selected = true;
}
}
});
this.update();
}
/**
* Event callback to handle the click on the select all checkbox.
*
* @param {Event} e
* @fires Select#onSelectAll
* @type {function}
*/
handleClickSelectAll(e) {
e.preventDefault();
// Early returns.
if (!this.selectAll || this.selectAll.querySelector('input').disabled) {
return;
}
const checked = Select.#checkCheckbox(e);
const options = Array.from(this.select.options).filter((o) => !o.disabled);
const checkboxes = Array.from(
this.searchContainer.querySelectorAll('[data-visible="true"]'),
).filter((checkbox) => !checkbox.querySelector('input').disabled);
checkboxes.forEach((checkbox) => {
checkbox.querySelector('input').checked = checked;
const option = options.find(
(o) => o.text === checkbox.getAttribute('data-select-multiple-value'),
);
if (option) {
if (checked) {
option.selected = true;
} else {
option.selected = false;
}
}
});
this.update();
this.trigger('onSelectAll', { selected: options });
}
/**
* Event callback to handle moving the focus out of the select.
*
* @param {Event} e
* @type {function}
*/
handleFocusout(e) {
if (
e.relatedTarget &&
this.selectMultiple &&
!this.selectMultiple.contains(e.relatedTarget) &&
this.searchContainer.style.display === 'block'
) {
this.searchContainer.style.display = 'none';
this.input.classList.remove('ecl-select--active');
this.input.setAttribute('aria-expanded', false);
} else if (
e.relatedTarget &&
!this.selectMultiple &&
!this.select.parentNode.contains(e.relatedTarget)
) {
this.select.blur();
}
}
/**
* Event callback to handle the user typing in the search field.
*
* @param {Event} e
* @fires Select#onSearch
* @type {function}
*/
handleSearch(e) {
const dropDownHeight = this.optionsContainer.offsetHeight;
this.visibleOptions = [];
const keyword = e.target.value.toLowerCase();
let eventDetails = {};
if (dropDownHeight > 0) {
this.optionsContainer.style.height = `${dropDownHeight}px`;
}
this.checkboxes.forEach((checkbox) => {
if (
!checkbox
.getAttribute('data-select-multiple-value')
.toLocaleLowerCase()
.includes(keyword)
) {
checkbox.removeAttribute('data-visible');
checkbox.style.display = 'none';
} else {
checkbox.setAttribute('data-visible', true);
checkbox.style.display = 'flex';
// Highlight keyword in checkbox label.
const checkboxLabelText = checkbox.querySelector(
'.ecl-checkbox__label-text',
);
checkboxLabelText.textContent = checkboxLabelText.textContent.replace(
'.cls-1{fill:none}',
'',
);
if (keyword) {
checkboxLabelText.innerHTML = checkboxLabelText.textContent.replace(
new RegExp(`${keyword}(?!([^<]+)?<)`, 'gi'),
'<b>$&</b>',
);
}
this.visibleOptions.push(checkbox);
}
});
// Select all checkbox follows along.
const checked = this.visibleOptions.filter(
(c) => c.querySelector('input').checked,
);
if (
this.selectAll &&
(this.visibleOptions.length === 0 ||
this.visibleOptions.length !== checked.length)
) {
this.selectAll.querySelector('input').checked = false;
} else if (this.selectAll) {
this.selectAll.querySelector('input').checked = true;
}
// Display no-results message.
const noResultsElement = this.searchContainer.querySelector(
'.ecl-select__multiple-no-results',
);
const groups = this.optionsContainer.getElementsByClassName(
'ecl-select__multiple-group',
);
// eslint-disable-next-line no-restricted-syntax
for (const group of groups) {
group.style.display = 'none';
// eslint-disable-next-line no-restricted-syntax
const groupedCheckboxes = [...group.children].filter((node) =>
node.classList.contains('ecl-checkbox'),
);
groupedCheckboxes.forEach((single) => {
if (single.hasAttribute('data-visible')) {
single.closest('.ecl-select__multiple-group').style.display = 'block';
}
});
}
if (this.visibleOptions.length === 0 && !noResultsElement) {
// Create no-results element.
const noResultsContainer = document.createElement('div');
const noResultsLabel = document.createElement('span');
noResultsContainer.classList.add('ecl-select__multiple-no-results');
noResultsLabel.innerHTML = this.textNoResults;
noResultsContainer.appendChild(noResultsLabel);
this.optionsContainer.appendChild(noResultsContainer);
} else if (this.visibleOptions.length > 0 && noResultsElement !== null) {
noResultsElement.parentNode.removeChild(noResultsElement);
}
// reset
if (keyword.length === 0) {
this.checkboxes.forEach((checkbox) => {
checkbox.setAttribute('data-visible', true);
checkbox.style.display = 'flex';
});
// Enable select all checkbox.
if (this.selectAll) {
this.selectAll.classList.remove('ecl-checkbox--disabled');
this.selectAll.querySelector('input').disabled = false;
}
} else if (keyword.length !== 0 && this.selectAll) {
// Disable select all checkbox.
this.selectAll.classList.add('ecl-checkbox--disabled');
this.selectAll.querySelector('input').disabled = true;
}
if (this.visibleOptions.length > 0) {
const visibleLabels = this.visibleOptions.map((option) => {
let label = null;
const labelEl = queryOne('.ecl-checkbox__label-text', option);
if (labelEl) {
label = labelEl.innerHTML.replace(/<\/?b>/g, '');
}
return label || '';
});
eventDetails = {
results: visibleLabels,
text: e.target.value.toLowerCase(),
};
} else {
eventDetails = { results: 'none', text: e.target.value.toLowerCase() };
}
this.trigger('onSearch', eventDetails);
}
/**
* Event callback to handle the click outside the select.
*
* @param {Event} e
* @type {function}
*/
handleClickOutside(e) {
if (
e.target &&
this.selectMultiple &&
!this.selectMultiple.contains(e.target) &&
this.searchContainer.style.display === 'block'
) {
this.searchContainer.style.display = 'none';
this.input.classList.remove('ecl-select--active');
this.input.setAttribute('aria-expanded', false);
}
}
/**
* Event callback to handle keyboard events on the select.
*
* @param {Event} e
* @type {function}
*/
handleKeyboardOnSelect(e) {
switch (e.key) {
case 'Escape':
e.preventDefault();
this.handleEsc(e);
break;
case ' ':
case 'Enter':
if (this.multiple) {
e.preventDefault();
this.handleToggle(e);
if (this.search) {
this.search.focus();
} else if (this.selectAll) {
this.selectAll.firstChild.focus();
} else {
this.checkboxes[0].firstChild.focus();
}
}
break;
case 'ArrowDown':
if (this.multiple) {
e.preventDefault();
if (!this.isOpen) {
this.handleToggle(e);
}
if (this.search) {
this.search.focus();
} else if (this.selectAll) {
this.selectAll.firstChild.focus();
} else {
this.checkboxes[0].firstChild.focus();
}
}
break;
default:
}
}
/**
* Event callback to handle keyboard events on the select all checkbox.
*
* @param {Event} e
* @type {function}
*/
handleKeyboardOnSelectAll(e) {
switch (e.key) {
case 'Escape':
e.preventDefault();
this.handleEsc(e);
break;
case 'ArrowDown':
e.preventDefault();
if (this.visibleOptions.length > 0) {
this.visibleOptions[0].querySelector('input').focus();
} else {
this.input.focus();
}
break;
case 'ArrowUp':
e.preventDefault();
if (this.search) {
this.search.focus();
} else {
this.input.focus();
this.handleToggle(e);
}
break;
case 'Tab':
e.preventDefault();
if (e.shiftKey) {
if (this.search) {
this.search.focus();
}
} else if (this.visibleOptions.length > 0) {
this.visibleOptions[0].querySelector('input').focus();
} else {
this.input.focus();
}
break;
default:
}
}
/**
* Event callback to handle keyboard events on the dropdown.
*
* @param {Event} e
* @type {function}
*/
handleKeyboardOnOptions(e) {
switch (e.key) {
case 'Escape':
e.preventDefault();
this.handleEsc(e);
break;
case 'ArrowDown':
e.preventDefault();
this.#moveFocus('down');
break;
case 'ArrowUp':
e.preventDefault();
this.#moveFocus('up');
break;
case 'Tab':
e.preventDefault();
if (e.shiftKey) {
this.#moveFocus('up');
} else {
this.#moveFocus('down');
}
break;
default:
}
}
/**
* Event callback to handle keyboard events
*
* @param {Event} e
* @type {function}
*/
handleKeyboardOnSearch(e) {
switch (e.key) {
case 'Escape':
e.preventDefault();
this.handleEsc(e);
break;
case 'ArrowDown':
e.preventDefault();
if (!this.selectAll || this.selectAll.querySelector('input').disabled) {
if (this.visibleOptions.length > 0) {
this.visibleOptions[0].querySelector('input').focus();
} else {
this.input.focus();
}
} else {
this.selectAll.querySelector('input').focus();
}
break;
case 'ArrowUp':
e.preventDefault();
this.input.focus();
this.handleToggle(e);
break;
default:
}
}
/**
* Event callback to handle the click on an option.
*
* @param {Event} e
* @type {function}
*/
handleKeyboardOnOption(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.handleClickOption(e);
}
}
/**
* Event callback to handle keyboard events on the clear all button.
*
* @param {Event} e
* @fires Select#onReset
* @type {function}
*/
handleKeyboardOnClearAll(e) {
e.preventDefault();
switch (e.key) {
case 'Enter':
case ' ':
this.handleClickOnClearAll(e);
this.trigger('onReset', e);
this.input.focus();
break;
case 'ArrowDown':
this.input.focus();
break;
case 'ArrowUp':
if (this.closeButton) {
this.closeButton.focus();
} else if (this.visibleOptions.length > 0) {
this.visibleOptions[this.visibleOptions.length - 1]
.querySelector('input')
.focus();
} else if (this.search) {
this.search.focus();
} else {
this.input.focus();
this.handleToggle(e);
}
break;
case 'Tab':
if (e.shiftKey) {
if (this.closeButton) {
this.closeButton.focus();
} else if (this.visibleOptions.length > 0) {
this.visibleOptions[this.visibleOptions.length - 1]
.querySelector('input')
.focus();
} else if (this.search) {
this.search.focus();
} else {
this.input.focus();
this.handleToggle(e);
}
} else {
this.input.focus();
this.handleToggle(e);
}
break;
default:
}
}
/**
* Event callback for handling keyboard events in the close button.
*
* @param {Event} e
* @type {function}
*/
handleKeyboardOnClose(e) {
e.preventDefault();
switch (e.key) {
case 'Enter':
case ' ':
this.handleEsc(e);
this.input.focus();
break;
case 'ArrowUp':
if (this.visibleOptions.length > 0) {
this.visibleOptions[this.visibleOptions.length - 1]
.querySelector('input')
.focus();
} else {
this.input.focus();
this.handleToggle(e);
}
break;
case 'ArrowDown':
if (this.clearAllButton) {
this.clearAllButton.focus();
} else {
this.input.focus();
this.handleToggle(e);
}
break;
case 'Tab':
if (!e.shiftKey) {
if (this.clearAllButton) {
this.clearAllButton.focus();
} else {
this.input.focus();
this.handleToggle(e);
}
} else {
// eslint-disable-next-line no-lonely-if
if (this.visibleOptions.length > 0) {
this.visibleOptions[this.visibleOptions.length - 1]
.querySelector('input')
.focus();
} else {
this.input.focus();
this.handleToggle(e);
}
}
break;
default:
}
}
/**
* Event callback to handle different events which will close the dropdown.
*
* @param {Event} e
* @type {function}
*/
handleEsc(e) {
if (this.multiple) {
e.preventDefault();
this.searchContainer.style.display = 'none';
this.input.setAttribute('aria-expanded', false);
this.input.blur();
this.input.classList.remove('ecl-select--active');
} else {
this.select.classList.remove('ecl-select--active');
}
}
/**
* Event callback to handle the click on the clear all button.
*
* @param {Event} e
* @fires Select#onReset
* @type {function}
*/
handleClickOnClearAll(e) {
e.preventDefault();
Array.from(this.select.options).forEach((option) => {
const checkbox = this.selectMultiple.querySelector(
`[data-select-multiple-value="${option.text}"]`,
);
const input = checkbox.querySelector('.ecl-checkbox__input');
input.checked = false;
option.selected = false;
});
if (this.selectAll) {
this.selectAll.querySelector('.ecl-checkbox__input').checked = false;
}
this.update(0);
this.trigger('onReset', e);
}
/**
* Event callback to reset the multiple select on form reset.
*
* @type {function}
*/
resetForm() {
if (this.multiple) {
// A slight timeout is necessary to execute the function just after the original reset of the form.
setTimeout(() => {
Array.from(this.select.options).forEach((option) => {
const checkbox = this.selectMultiple.querySelector(
`[data-select-multiple-value="${option.text}"]`,
);
const input = checkbox.querySelector('.ecl-checkbox__input');
if (input.checked) {
option.selected = true;
} else {
option.selected = false;
}
});
this.update(0);
}, 10);
}
}
}
export default Select;