select.js

  1. /* eslint-disable no-return-assign */
  2. import { queryOne } from '@ecl/dom-utils';
  3. import getSystem from '@ecl/builder/utils/getSystem';
  4. import EventManager from '@ecl/event-manager';
  5. import iconSvgAllCheckEc from '@ecl/resources-ec-icons/dist/svg/all/check.svg';
  6. import iconSvgAllCheckEu from '@ecl/resources-eu-icons/dist/svg/all/check.svg';
  7. import iconSvgAllCornerArrowEc from '@ecl/resources-ec-icons/dist/svg/all/corner-arrow.svg';
  8. import iconSvgAllCornerArrowEu from '@ecl/resources-eu-icons/dist/svg/all/corner-arrow.svg';
  10. const system = getSystem();
  11. const iconSvgAllCheck = system === 'eu' ? iconSvgAllCheckEu : iconSvgAllCheckEc;
  12. const iconSvgAllCornerArrow =
  13.   system === 'eu' ? iconSvgAllCornerArrowEu : iconSvgAllCornerArrowEc;
  14. const iconSize = system === 'eu' ? 's' : 'xs';
  16. /**
  17.  * This API mostly refers to the multiple select, in the default select only two methods are actually used:
  18.  * handleKeyboardOnSelect() and handleOptgroup().
  19.  *
  20.  * For the multiple select there are multiple labels contained in this component. You can set them in 2 ways:
  21.  * directly as a string or through data attributes.
  22.  * Textual values have precedence and if they are not provided, then DOM data attributes are used.
  23.  *
  24.  * @param {HTMLElement} element DOM element for component instantiation and scope
  25.  * @param {Object} options
  26.  * @param {String} options.defaultText The default placeholder
  27.  * @param {String} options.searchText The label for search
  28.  * @param {String} options.selectAllText The label for select all
  29.  * @param {String} options.selectMultipleSelector The data attribute selector of the select multiple
  30.  * @param {String} options.defaultTextAttribute The data attribute for the default placeholder text
  31.  * @param {String} options.searchTextAttribute The data attribute for the default search text
  32.  * @param {String} options.selectAllTextAttribute The data attribute for the select all text
  33.  * @param {String} options.noResultsTextAttribute The data attribute for the no results options text
  34.  * @param {String} options.closeLabelAttribute The data attribute for the close button
  35.  * @param {String} options.clearAllLabelAttribute The data attribute for the clear all button
  36.  * @param {String} options.selectMultiplesSelectionCountSelector The selector for the counter of selected options
  37.  * @param {String} options.closeButtonLabel The label of the close button
  38.  * @param {String} options.clearAllButtonLabel The label of the clear all button
  39.  */
  40. export class Select {
  41.   /**
  42.    * @static
  43.    * Shorthand for instance creation and initialisation.
  44.    *
  45.    * @param {HTMLElement} root DOM element for component instantiation and scope
  46.    *
  47.    * @return {Select} An instance of Select.
  48.    */
  49.   static autoInit(root, defaultOptions = {}) {
  50.     const select = new Select(root, defaultOptions);
  52.     select.init();
  53.     root.ECLSelect = select;
  54.     return select;
  55.   }
  57.   /**
  58.    * @event Select#onToggle
  59.    */
  60.   /**
  61.    * @event Select#onSelection
  62.    */
  63.   /**
  64.    * @event Select#onSelectAll
  65.    */
  66.   /**
  67.    * @event Select#onReset
  68.    */
  69.   /**
  70.    * @event Select#onSearch
  71.    *
  72.    */
  73.   supportedEvents = [
  74.     'onToggle',
  75.     'onSelection',
  76.     'onSelectAll',
  77.     'onReset',
  78.     'onSearch',
  79.   ];
  81.   constructor(
  82.     element,
  83.     {
  84.       defaultText = '',
  85.       searchText = '',
  86.       selectAllText = '',
  87.       noResultsText = '',
  88.       selectMultipleSelector = '[data-ecl-select-multiple]',
  89.       defaultTextAttribute = 'data-ecl-select-default',
  90.       searchTextAttribute = 'data-ecl-select-search',
  91.       selectAllTextAttribute = 'data-ecl-select-all',
  92.       noResultsTextAttribute = 'data-ecl-select-no-results',
  93.       closeLabelAttribute = 'data-ecl-select-close',
  94.       clearAllLabelAttribute = 'data-ecl-select-clear-all',
  95.       selectMultiplesSelectionCountSelector = 'ecl-select-multiple-selections-counter',
  96.       closeButtonLabel = '',
  97.       clearAllButtonLabel = '',
  98.     } = {},
  99.   ) {
  100.     // Check element
  101.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  102.       throw new TypeError(
  103.         'DOM element should be given to initialize this widget.',
  104.       );
  105.     }
  107.     this.element = element;
  108.     this.eventManager = new EventManager();
  110.     // Options
  111.     this.selectMultipleSelector = selectMultipleSelector;
  112.     this.selectMultiplesSelectionCountSelector =
  113.       selectMultiplesSelectionCountSelector;
  114.     this.defaultTextAttribute = defaultTextAttribute;
  115.     this.searchTextAttribute = searchTextAttribute;
  116.     this.selectAllTextAttribute = selectAllTextAttribute;
  117.     this.noResultsTextAttribute = noResultsTextAttribute;
  118.     this.defaultText = defaultText;
  119.     this.searchText = searchText;
  120.     this.selectAllText = selectAllText;
  121.     this.noResultsText = noResultsText;
  122.     this.clearAllButtonLabel = clearAllButtonLabel;
  123.     this.closeButtonLabel = closeButtonLabel;
  124.     this.closeLabelAttribute = closeLabelAttribute;
  125.     this.clearAllLabelAttribute = clearAllLabelAttribute;
  127.     // Private variables
  128.     this.input = null;
  129.     this.search = null;
  130.     this.checkboxes = null;
  131.     this.select = null;
  132.     this.selectAll = null;
  133.     this.selectIcon = null;
  134.     this.textDefault = null;
  135.     this.textSearch = null;
  136.     this.textSelectAll = null;
  137.     this.textNoResults = null;
  138.     this.selectMultiple = null;
  139.     this.inputContainer = null;
  140.     this.optionsContainer = null;
  141.     this.visibleOptions = null;
  142.     this.searchContainer = null;
  143.     this.countSelections = null;
  144.     this.form = null;
  145.     this.formGroup = null;
  146.     this.label = null;
  147.     this.helper = null;
  148.     this.invalid = null;
  149.     this.selectMultipleId = null;
  150.     this.multiple =
  151.       queryOne(this.selectMultipleSelector, this.element.parentNode) || false;
  152.     this.isOpen = false;
  154.     // Bind `this` for use in callbacks
  155.     this.handleToggle = this.handleToggle.bind(this);
  156.     this.handleClickOption = this.handleClickOption.bind(this);
  157.     this.handleClickSelectAll = this.handleClickSelectAll.bind(this);
  158.     this.handleEsc = this.handleEsc.bind(this);
  159.     this.handleFocusout = this.handleFocusout.bind(this);
  160.     this.handleSearch = this.handleSearch.bind(this);
  161.     this.handleClickOutside = this.handleClickOutside.bind(this);
  162.     this.resetForm = this.resetForm.bind(this);
  163.     this.handleClickOnClearAll = this.handleClickOnClearAll.bind(this);
  164.     this.handleKeyboardOnSelect = this.handleKeyboardOnSelect.bind(this);
  165.     this.handleKeyboardOnSelectAll = this.handleKeyboardOnSelectAll.bind(this);
  166.     this.handleKeyboardOnSearch = this.handleKeyboardOnSearch.bind(this);
  167.     this.handleKeyboardOnOptions = this.handleKeyboardOnOptions.bind(this);
  168.     this.handleKeyboardOnOption = this.handleKeyboardOnOption.bind(this);
  169.     this.handleKeyboardOnClearAll = this.handleKeyboardOnClearAll.bind(this);
  170.     this.handleKeyboardOnClose = this.handleKeyboardOnClose.bind(this);
  171.     this.setCurrentValue = this.setCurrentValue.bind(this);
  172.     this.update = this.update.bind(this);
  173.   }
  175.   /**
  176.    * Static method to create an svg icon.
  177.    *
  178.    * @static
  179.    * @private
  180.    * @returns {HTMLElement}
  181.    */
  182.   static #createSvgIcon(icon, classes) {
  183.     const tempElement = document.createElement('div');
  184.     tempElement.innerHTML = icon; // avoiding the use of not-so-stable createElementNs
  185.     const svg = tempElement.children[0];
  186.     svg.removeAttribute('height');
  187.     svg.removeAttribute('width');
  188.     svg.setAttribute('focusable', false);
  189.     svg.setAttribute('aria-hidden', true);
  190.     // The following element is <path> which does not support classList API as others.
  191.     svg.setAttribute('class', classes);
  192.     return svg;
  193.   }
  195.   /**
  196.    * Static method to create a checkbox element.
  197.    *
  198.    * @static
  199.    * @param {Object} options
  200.    * @param {String} options.id
  201.    * @param {String} options.text
  202.    * @param {String} [options.extraClass] - additional CSS class
  203.    * @param {String} [options.disabled] - relevant when re-creating an option
  204.    * @param {String} [options.selected] - relevant when re-creating an option
  205.    * @param {String} ctx
  206.    * @private
  207.    * @returns {HTMLElement}
  208.    */
  209.   static #createCheckbox(options, ctx) {
  210.     // Early returns.
  211.     if (!options || !ctx) return '';
  212.     const { id, text, disabled, selected, extraClass } = options;
  213.     if (!id || !text) return '';
  215.     // Elements to work with.
  216.     const checkbox = document.createElement('div');
  217.     const input = document.createElement('input');
  218.     const label = document.createElement('label');
  219.     const box = document.createElement('span');
  220.     const labelText = document.createElement('span');
  222.     // Respect optional input parameters.
  223.     if (extraClass) {
  224.       checkbox.classList.add(extraClass);
  225.     }
  226.     if (selected) {
  227.       input.setAttribute('checked', true);
  228.     }
  229.     if (disabled) {
  230.       checkbox.classList.add('ecl-checkbox--disabled');
  231.       box.classList.add('ecl-checkbox__box--disabled');
  232.       input.setAttribute('disabled', disabled);
  233.     }
  235.     // Imperative work follows.
  236.     checkbox.classList.add('ecl-checkbox');
  237.     checkbox.setAttribute('data-select-multiple-value', text);
  238.     input.classList.add('ecl-checkbox__input');
  239.     input.setAttribute('type', 'checkbox');
  240.     input.setAttribute('id', `${ctx}-${id}`);
  241.     input.setAttribute('name', `${ctx}-${id}`);
  242.     checkbox.appendChild(input);
  243.     label.classList.add('ecl-checkbox__label');
  244.     label.setAttribute('for', `${ctx}-${id}`);
  245.     box.classList.add('ecl-checkbox__box');
  246.     box.setAttribute('aria-hidden', true);
  247.     box.appendChild(
  248.       Select.#createSvgIcon(
  249.         iconSvgAllCheck,
  250.         'ecl-icon ecl-icon--s ecl-checkbox__icon',
  251.       ),
  252.     );
  253.     label.appendChild(box);
  254.     labelText.classList.add('ecl-checkbox__label-text');
  255.     labelText.innerHTML = text;
  256.     label.appendChild(labelText);
  257.     checkbox.appendChild(label);
  258.     return checkbox;
  259.   }
  261.   /**
  262.    * Static method to generate the select icon
  263.    *
  264.    * @static
  265.    * @private
  266.    * @returns {HTMLElement}
  267.    */
  268.   static #createSelectIcon() {
  269.     const wrapper = document.createElement('div');
  270.     wrapper.classList.add('ecl-select__icon');
  271.     const button = document.createElement('button');
  272.     button.classList.add(
  273.       'ecl-button',
  274.       'ecl-button--ghost',
  275.       'ecl-button--icon-only',
  276.     );
  277.     button.setAttribute('tabindex', '-1');
  278.     const labelWrapper = document.createElement('span');
  279.     labelWrapper.classList.add('ecl-button__container');
  280.     const label = document.createElement('span');
  281.     label.classList.add('ecl-button__label');
  282.     label.textContent = 'Toggle dropdown';
  283.     labelWrapper.appendChild(label);
  284.     const icon = Select.#createSvgIcon(
  285.       iconSvgAllCornerArrow,
  286.       `ecl-icon ecl-icon--${iconSize} ecl-icon--rotate-180`,
  287.     );
  288.     labelWrapper.appendChild(icon);
  289.     button.appendChild(labelWrapper);
  290.     wrapper.appendChild(button);
  291.     return wrapper;
  292.   }
  294.   /**
  295.    * Static method to programmatically check an ECL-specific checkbox when previously default has been prevented.
  296.    *
  297.    * @static
  298.    * @param {Event} e
  299.    * @private
  300.    */
  301.   static #checkCheckbox(e) {
  302.     const input = e.target.closest('.ecl-checkbox').querySelector('input');
  303.     input.checked = !input.checked;
  305.     return input.checked;
  306.   }
  308.   /**
  309.    * Static method to generate a random string
  310.    *
  311.    * @static
  312.    * @param {number} length
  313.    * @private
  314.    */
  315.   static #generateRandomId(length) {
  316.     return Math.random().toString(36).substr(2, length);
  317.   }
  319.   /**
  320.    * Initialise component.
  321.    */
  322.   init() {
  323.     if (!ECL) {
  324.       throw new TypeError('Called init but ECL is not present');
  325.     }
  326.     ECL.components = ECL.components || new Map();
  328.     this.select = this.element;
  330.     if (this.multiple) {
  331.       const containerClasses = Array.from(this.select.parentElement.classList);
  332.       this.textDefault =
  333.         this.defaultText ||
  334.         this.element.getAttribute(this.defaultTextAttribute);
  335.       this.textSearch =
  336.         this.searchText || this.element.getAttribute(this.searchTextAttribute);
  337.       this.textSelectAll =
  338.         this.selectAllText ||
  339.         this.element.getAttribute(this.selectAllTextAttribute);
  340.       this.textNoResults =
  341.         this.noResultsText ||
  342.         this.element.getAttribute(this.noResultsTextAttribute);
  343.       this.closeButtonLabel =
  344.         this.closeButtonLabel ||
  345.         this.element.getAttribute(this.closeLabelAttribute);
  346.       this.clearAllButtonLabel =
  347.         this.clearAllButtonLabel ||
  348.         this.element.getAttribute(this.clearAllLabelAttribute);
  349.       // Retrieve the id from the markup or generate one.
  350.       this.selectMultipleId =
  351.         this.element.id || `select-multiple-${Select.#generateRandomId(4)}`;
  352.       this.element.id = this.selectMultipleId;
  354.       this.formGroup = this.element.closest('.ecl-form-group');
  355.       if (this.formGroup) {
  356.         this.formGroup.setAttribute('role', 'application');
  357.         this.label = queryOne('.ecl-form-label', this.formGroup);
  358.         this.helper = queryOne('.ecl-help-block', this.formGroup);
  359.         this.invalid = queryOne('.ecl-feedback-message', this.formGroup);
  360.       }
  362.       // Disable focus on default select
  363.       this.select.setAttribute('tabindex', '-1');
  365.       this.selectMultiple = document.createElement('div');
  366.       this.selectMultiple.classList.add('ecl-select__multiple');
  367.       // Close the searchContainer when tabbing out of the selectMultiple
  368.       this.selectMultiple.addEventListener('focusout', this.handleFocusout);
  370.       this.inputContainer = document.createElement('div');
  371.       this.inputContainer.classList.add(...containerClasses);
  372.       this.selectMultiple.appendChild(this.inputContainer);
  374.       this.input = document.createElement('button');
  375.       this.input.classList.add('ecl-select', 'ecl-select__multiple-toggle');
  376.       this.input.setAttribute('type', 'button');
  377.       this.input.setAttribute(
  378.         'aria-controls',
  379.         `${this.selectMultipleId}-dropdown`,
  380.       );
  381.       this.input.setAttribute('id', `${this.selectMultipleId}-toggle`);
  382.       this.input.setAttribute('aria-expanded', false);
  383.       if (containerClasses.find((c) => c.includes('disabled'))) {
  384.         this.input.setAttribute('disabled', true);
  385.       }
  387.       // Add accessibility attributes
  388.       if (this.label) {
  389.         this.label.setAttribute('for', `${this.selectMultipleId}-toggle`);
  390.         this.input.setAttribute('aria-labelledby', this.label.id);
  391.       }
  392.       let describedby = '';
  393.       if (this.helper) {
  394.         describedby = this.helper.id;
  395.       }
  396.       if (this.invalid) {
  397.         describedby = describedby
  398.           ? `${describedby} ${this.invalid.id}`
  399.           : this.invalid.id;
  400.       }
  401.       if (describedby) {
  402.         this.input.setAttribute('aria-describedby', describedby);
  403.       }
  405.       this.input.addEventListener('keydown', this.handleKeyboardOnSelect);
  406.       this.input.addEventListener('click', this.handleToggle);
  407.       this.selectionCount = document.createElement('div');
  408.       this.selectionCount.classList.add(
  409.         this.selectMultiplesSelectionCountSelector,
  410.       );
  411.       this.selectionCountText = document.createElement('span');
  412.       this.selectionCount.appendChild(this.selectionCountText);
  414.       this.inputContainer.appendChild(this.selectionCount);
  415.       this.inputContainer.appendChild(this.input);
  416.       this.inputContainer.appendChild(Select.#createSelectIcon());
  418.       this.searchContainer = document.createElement('div');
  419.       this.searchContainer.style.display = 'none';
  420.       this.searchContainer.classList.add(
  421.         'ecl-select__multiple-dropdown',
  422.         ...containerClasses,
  423.       );
  425.       this.searchContainer.setAttribute(
  426.         'id',
  427.         `${this.selectMultipleId}-dropdown`,
  428.       );
  430.       this.selectMultiple.appendChild(this.searchContainer);
  432.       this.search = document.createElement('input');
  433.       this.search.classList.add('ecl-text-input');
  434.       this.search.setAttribute('type', 'search');
  435.       this.search.setAttribute('placeholder', this.textSearch || '');
  436.       this.search.addEventListener('keyup', this.handleSearch);
  437.       this.search.addEventListener('search', this.handleSearch);
  438.       this.searchContainer.appendChild(this.search);
  440.       if (this.textSelectAll) {
  441.         const optionsCount = Array.from(this.select.options).filter(
  442.           (option) => !option.disabled,
  443.         ).length;
  445.         this.selectAll = Select.#createCheckbox(
  446.           {
  447.             id: `all-${Select.#generateRandomId(4)}`,
  448.             text: `${this.textSelectAll} (${optionsCount})`,
  449.             extraClass: 'ecl-select__multiple-all',
  450.           },
  451.           this.selectMultipleId,
  452.         );
  453.         this.selectAll.addEventListener('click', this.handleClickSelectAll);
  454.         this.selectAll.addEventListener('keypress', this.handleClickSelectAll);
  455.         this.selectAll.addEventListener('change', this.handleClickSelectAll);
  456.         this.searchContainer.appendChild(this.selectAll);
  457.       }
  459.       this.search.addEventListener('keydown', this.handleKeyboardOnSearch);
  460.       this.optionsContainer = document.createElement('div');
  461.       this.optionsContainer.classList.add('ecl-select__multiple-options');
  462.       this.searchContainer.appendChild(this.optionsContainer);
  463.       // Toolbar
  464.       if (this.clearAllButtonLabel || this.closeButtonLabel) {
  465.         this.dropDownToolbar = document.createElement('div');
  466.         this.dropDownToolbar.classList.add('ecl-select-multiple-toolbar');
  468.         if (this.closeButtonLabel) {
  469.           this.closeButton = document.createElement('button');
  470.           this.closeButton.textContent = this.closeButtonLabel;
  471.           this.closeButton.classList.add('ecl-button', 'ecl-button--primary');
  472.           this.closeButton.addEventListener('click', this.handleEsc);
  473.           this.closeButton.addEventListener(
  474.             'keydown',
  475.             this.handleKeyboardOnClose,
  476.           );
  478.           if (this.dropDownToolbar) {
  479.             this.dropDownToolbar.appendChild(this.closeButton);
  480.             this.searchContainer.appendChild(this.dropDownToolbar);
  481.             this.dropDownToolbar.style.display = 'none';
  482.           }
  483.         }
  485.         if (this.clearAllButtonLabel) {
  486.           this.clearAllButton = document.createElement('button');
  487.           this.clearAllButton.textContent = this.clearAllButtonLabel;
  488.           this.clearAllButton.classList.add(
  489.             'ecl-button',
  490.             'ecl-button--secondary',
  491.           );
  492.           this.clearAllButton.addEventListener(
  493.             'click',
  494.             this.handleClickOnClearAll,
  495.           );
  496.           this.clearAllButton.addEventListener(
  497.             'keydown',
  498.             this.handleKeyboardOnClearAll,
  499.           );
  500.           this.dropDownToolbar.appendChild(this.clearAllButton);
  501.         }
  502.       }
  504.       this.selectAll.addEventListener(
  505.         'keydown',
  506.         this.handleKeyboardOnSelectAll,
  507.       );
  508.       this.optionsContainer.addEventListener(
  509.         'keydown',
  510.         this.handleKeyboardOnOptions,
  511.       );
  513.       if (this.select.options && this.select.options.length > 0) {
  514.         this.checkboxes = Array.from(this.select.options).map((option) => {
  515.           let optgroup = '';
  516.           let checkbox = '';
  517.           if (option.parentNode.tagName === 'OPTGROUP') {
  518.             if (
  519.               !queryOne(
  520.                 `fieldset[data-ecl-multiple-group="${option.parentNode.getAttribute(
  521.                   'label',
  522.                 )}"]`,
  523.                 this.optionsContainer,
  524.               )
  525.             ) {
  526.               optgroup = document.createElement('fieldset');
  527.               const title = document.createElement('legend');
  528.               title.classList.add('ecl-select__multiple-group__title');
  529.               title.innerHTML = option.parentNode.getAttribute('label');
  530.               optgroup.appendChild(title);
  531.               optgroup.setAttribute(
  532.                 'data-ecl-multiple-group',
  533.                 option.parentNode.getAttribute('label'),
  534.               );
  535.               optgroup.classList.add('ecl-select__multiple-group');
  536.               this.optionsContainer.appendChild(optgroup);
  537.             } else {
  538.               optgroup = queryOne(
  539.                 `fieldset[data-ecl-multiple-group="${option.parentNode.getAttribute(
  540.                   'label',
  541.                 )}"]`,
  542.                 this.optionsContainer,
  543.               );
  544.             }
  545.           }
  547.           if (option.selected) {
  548.             this.#updateSelectionsCount(1);
  549.             if (this.dropDownToolbar) {
  550.               this.dropDownToolbar.style.display = 'flex';
  551.             }
  552.           }
  553.           checkbox = Select.#createCheckbox(
  554.             {
  555.               // spread operator does not work in storybook context so we map 1:1
  556.               id: option.value,
  557.               text: option.text,
  558.               disabled: option.disabled,
  559.               selected: option.selected,
  560.             },
  561.             this.selectMultipleId,
  562.           );
  564.           checkbox.setAttribute('data-visible', true);
  565.           if (!checkbox.classList.contains('ecl-checkbox--disabled')) {
  566.             checkbox.addEventListener('click', this.handleClickOption);
  567.             checkbox.addEventListener('keydown', this.handleKeyboardOnOption);
  568.           }
  569.           if (optgroup) {
  570.             optgroup.appendChild(checkbox);
  571.           } else {
  572.             this.optionsContainer.appendChild(checkbox);
  573.           }
  575.           return checkbox;
  576.         });
  577.       } else {
  578.         this.checkboxes = [];
  579.       }
  580.       this.visibleOptions = this.checkboxes;
  582.       this.select.parentNode.parentNode.insertBefore(
  583.         this.selectMultiple,
  584.         this.select.parentNode.nextSibling,
  585.       );
  587.       this.select.parentNode.classList.add('ecl-select__container--hidden');
  589.       // Respect default selected options.
  590.       this.#updateCurrentValue();
  592.       this.form = this.element.closest('form');
  593.       if (this.form) {
  594.         this.form.addEventListener('reset', this.resetForm);
  595.       }
  597.       document.addEventListener('click', this.handleClickOutside);
  598.     } else {
  599.       // Simple select
  600.       this.#handleOptgroup();
  601.       this.select.addEventListener('keydown', this.handleKeyboardOnSelect);
  602.     }
  604.     // Set ecl initialized attribute
  605.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  606.     ECL.components.set(this.element, this);
  607.   }
  609.   /**
  610.    * Update instance.
  611.    *
  612.    * @param {Integer} i
  613.    */
  614.   update(i) {
  615.     this.#updateCurrentValue();
  616.     this.#updateSelectionsCount(i);
  617.   }
  619.   /**
  620.    * Set the selected value(s) programmatically.
  621.    *
  622.    * @param {string | Array<string>} values - A string or an array of values or labels to set as selected.
  623.    * @param {string} [op='replace'] - The operation mode. Use 'add' to keep the previous selections.
  624.    * @throws {Error} Throws an error if an invalid operation mode is provided.
  625.    *
  626.    * @example
  627.    * // Replace current selection with new values
  628.    * setCurrentValue(['value1', 'value2']);
  629.    *
  630.    * // Add to current selection without clearing previous selections
  631.    * setCurrentValue(['value3', 'value4'], 'add');
  632.    *
  633.    */
  634.   setCurrentValue(values, op = 'replace') {
  635.     if (op !== 'replace' && op !== 'add') {
  636.       throw new Error('Invalid operation mode. Use "replace" or "add".');
  637.     }
  639.     const valuesArray = typeof values === 'string' ? [values] : values;
  641.     Array.from(this.select.options).forEach((option) => {
  642.       if (op === 'replace') {
  643.         option.selected = false;
  644.       }
  645.       if (
  646.         valuesArray.includes(option.value) ||
  647.         valuesArray.includes(option.label)
  648.       ) {
  649.         option.selected = true;
  650.       }
  651.     });
  653.     this.update();
  654.   }
  656.   /**
  657.    * Event callback to show/hide the dropdown
  658.    *
  659.    * @param {Event} e
  660.    * @fires Select#onToggle
  661.    * @type {function}
  662.    */
  663.   handleToggle(e) {
  664.     e.preventDefault();
  665.     this.input.classList.toggle('ecl-select--active');
  666.     if (this.searchContainer.style.display === 'none') {
  667.       this.searchContainer.style.display = 'block';
  668.       this.input.setAttribute('aria-expanded', true);
  669.       this.isOpen = true;
  670.     } else {
  671.       this.searchContainer.style.display = 'none';
  672.       this.input.setAttribute('aria-expanded', false);
  673.       this.isOpen = false;
  674.     }
  676.     const eventData = { opened: this.isOpen, e };
  677.     this.trigger('onToggle', eventData);
  678.   }
  680.   /**
  681.    * Register a callback function for a specific event.
  682.    *
  683.    * @param {string} eventName - The name of the event to listen for.
  684.    * @param {Function} callback - The callback function to be invoked when the event occurs.
  685.    * @returns {void}
  686.    * @memberof Select
  687.    * @instance
  688.    *
  689.    * @example
  690.    * // Registering a callback for the 'onToggle' event
  691.    * select.on('onToggle', (event) => {
  692.    *   console.log('Toggle event occurred!', event);
  693.    * });
  694.    */
  695.   on(eventName, callback) {
  696.     this.eventManager.on(eventName, callback);
  697.   }
  699.   /**
  700.    * Trigger a component event.
  701.    *
  702.    * @param {string} eventName - The name of the event to trigger.
  703.    * @param {any} eventData - Data associated with the event.
  704.    * @memberof Select
  705.    * @instance
  706.    *
  707.    */
  708.   trigger(eventName, eventData) {
  709.     this.eventManager.trigger(eventName, eventData);
  710.   }
  712.   /**
  713.    * Destroy the component instance.
  714.    */
  715.   destroy() {
  716.     this.input.removeEventListener('keydown', this.handleKeyboardOnSelect);
  718.     if (this.multiple) {
  719.       document.removeEventListener('click', this.handleClickOutside);
  720.       this.selectMultiple.removeEventListener('focusout', this.handleFocusout);
  721.       this.input.removeEventListener('click', this.handleToggle);
  722.       this.search.removeEventListener('keyup', this.handleSearch);
  723.       this.search.removeEventListener('keydown', this.handleKeyboardOnSearch);
  724.       this.selectAll.removeEventListener('click', this.handleClickSelectAll);
  725.       this.selectAll.removeEventListener('keypress', this.handleClickSelectAll);
  726.       this.selectAll.removeEventListener(
  727.         'keydown',
  728.         this.handleKeyboardOnSelectAll,
  729.       );
  730.       this.optionsContainer.removeEventListener(
  731.         'keydown',
  732.         this.handleKeyboardOnOptions,
  733.       );
  734.       this.checkboxes.forEach((checkbox) => {
  735.         checkbox.removeEventListener('click', this.handleClickSelectAll);
  736.         checkbox.removeEventListener('click', this.handleClickOption);
  737.         checkbox.removeEventListener('keydown', this.handleKeyboardOnOption);
  738.       });
  740.       if (this.closeButton) {
  741.         this.closeButton.removeEventListener('click', this.handleEsc);
  742.         this.closeButton.removeEventListener(
  743.           'keydown',
  744.           this.handleKeyboardOnClose,
  745.         );
  746.       }
  747.       if (this.clearAllButton) {
  748.         this.clearAllButton.removeEventListener(
  749.           'click',
  750.           this.handleClickOnClearAll,
  751.         );
  752.         this.clearAllButton.removeEventListener(
  753.           'keydown',
  754.           this.handleKeyboardOnClearAll,
  755.         );
  756.       }
  757.       if (this.selectMultiple) {
  758.         this.selectMultiple.remove();
  759.       }
  761.       this.select.parentNode.classList.remove('ecl-select__container--hidden');
  762.     }
  764.     if (this.element) {
  765.       this.element.removeAttribute('data-ecl-auto-initialized');
  766.       ECL.components.delete(this.element);
  767.     }
  768.   }
  770.   /**
  771.    * Private method to handle the update of the selected options counter.
  772.    *
  773.    * @param {Integer} i
  774.    * @private
  775.    */
  776.   #updateSelectionsCount(i) {
  777.     let selectedOptionsCount = 0;
  779.     if (i > 0) {
  780.       this.selectionCount.querySelector('span').innerHTML += i;
  781.     } else {
  782.       selectedOptionsCount = Array.from(this.select.options).filter(
  783.         (option) => option.selected,
  784.       ).length;
  785.     }
  786.     if (selectedOptionsCount > 0) {
  787.       this.selectionCount.querySelector('span').innerHTML =
  788.         selectedOptionsCount;
  789.       this.selectionCount.classList.add(
  790.         'ecl-select-multiple-selections-counter--visible',
  791.       );
  792.       if (this.dropDownToolbar) {
  793.         this.dropDownToolbar.style.display = 'flex';
  794.       }
  795.     } else {
  796.       this.selectionCount.classList.remove(
  797.         'ecl-select-multiple-selections-counter--visible',
  798.       );
  799.       if (this.dropDownToolbar) {
  800.         this.dropDownToolbar.style.display = 'none';
  801.       }
  802.     }
  804.     if (selectedOptionsCount >= 100) {
  805.       this.selectionCount.classList.add(
  806.         'ecl-select-multiple-selections-counter--xxl',
  807.       );
  808.     }
  809.   }
  811.   /**
  812.    * Private method to handle optgroup in single select.
  813.    *
  814.    * @private
  815.    */
  816.   #handleOptgroup() {
  817.     Array.from(this.select.options).forEach((option) => {
  818.       if (option.parentNode.tagName === 'OPTGROUP') {
  819.         const groupLabel = option.parentNode.getAttribute('label');
  820.         const optionLabel = option.getAttribute('label') || option.textContent;
  821.         if (groupLabel && optionLabel) {
  822.           option.setAttribute('aria-label', `${groupLabel}: ${optionLabel}`);
  823.         }
  824.       }
  825.     });
  826.   }
  828.   /**
  829.    * Private method to update the select value.
  830.    *
  831.    * @fires Select#onSelection
  832.    * @private
  833.    */
  834.   #updateCurrentValue() {
  835.     const optionSelected = Array.from(this.select.options)
  836.       .filter((option) => option.selected) // do not rely on getAttribute as it does not work in all cases
  837.       .map((option) => option.text)
  838.       .join(', ');
  840.     this.input.innerHTML = optionSelected || this.textDefault || '';
  842.     if (optionSelected !== '' && this.label) {
  843.       this.label.setAttribute(
  844.         'aria-label',
  845.         `${this.label.innerText} ${optionSelected}`,
  846.       );
  847.     } else if (optionSelected === '' && this.label) {
  848.       this.label.removeAttribute('aria-label');
  849.     }
  851.     this.trigger('onSelection', { selected: optionSelected });
  852.     // Dispatch a change event once the value of the select has changed.
  853.     this.select.dispatchEvent(new window.Event('change', { bubbles: true }));
  854.   }
  856.   /**
  857.    * Private method to handle the focus switch.
  858.    *
  859.    * @param {upOrDown}
  860.    * @param {loop}
  861.    * @private
  862.    */
  863.   #moveFocus(upOrDown, loop = true) {
  864.     const activeEl = document.activeElement;
  865.     const hasGroups = activeEl.parentElement.parentElement.classList.contains(
  866.       'ecl-select__multiple-group',
  867.     );
  868.     const options = !hasGroups
  869.       ? Array.from(
  870.           activeEl.parentElement.parentElement.querySelectorAll(
  871.             '.ecl-checkbox__input',
  872.           ),
  873.         )
  874.       : Array.from(
  875.           activeEl.parentElement.parentElement.parentElement.querySelectorAll(
  876.             '.ecl-checkbox__input',
  877.           ),
  878.         );
  879.     const activeIndex = options.indexOf(activeEl);
  880.     if (upOrDown === 'down') {
  881.       const nextSiblings = options
  882.         .splice(activeIndex + 1, options.length)
  883.         .filter(
  884.           (el) => !el.disabled && el.parentElement.style.display !== 'none',
  885.         );
  886.       if (nextSiblings.length > 0) {
  887.         nextSiblings[0].focus();
  888.       } else {
  889.         // eslint-disable-next-line no-lonely-if
  890.         if (loop) {
  891.           if (
  892.             this.dropDownToolbar &&
  893.             this.dropDownToolbar.style.display === 'flex'
  894.           ) {
  895.             this.dropDownToolbar.firstChild.focus();
  896.           } else {
  897.             this.input.focus();
  898.           }
  899.         }
  900.       }
  901.     } else {
  902.       const previousSiblings = options
  903.         .splice(0, activeIndex)
  904.         .filter(
  905.           (el) => !el.disabled && el.parentElement.style.display !== 'none',
  906.         );
  907.       if (previousSiblings.length > 0) {
  908.         previousSiblings[previousSiblings.length - 1].focus();
  909.       } else {
  910.         this.optionsContainer.scrollTop = 0;
  911.         if (!this.selectAll.querySelector('input').disabled) {
  912.           this.selectAll.querySelector('input').focus();
  913.         } else {
  914.           this.search.focus();
  915.         }
  916.       }
  917.     }
  918.   }
  920.   /**
  921.    * Event callback to handle the click on a checkbox.
  922.    *
  923.    * @param {Event} e
  924.    * @type {function}
  925.    */
  926.   handleClickOption(e) {
  927.     e.preventDefault();
  928.     Select.#checkCheckbox(e);
  930.     // Toggle values
  931.     const checkbox = e.target.closest('.ecl-checkbox');
  932.     Array.from(this.select.options).forEach((option) => {
  933.       if (option.text === checkbox.getAttribute('data-select-multiple-value')) {
  934.         if (option.getAttribute('selected') || option.selected) {
  935.           option.selected = false;
  936.           this.selectAll.querySelector('input').checked = false;
  937.         } else {
  938.           option.selected = true;
  939.         }
  940.       }
  941.     });
  943.     this.update();
  944.   }
  946.   /**
  947.    * Event callback to handle the click on the select all checkbox.
  948.    *
  949.    * @param {Event} e
  950.    * @fires Select#onSelectAll
  951.    * @type {function}
  952.    */
  953.   handleClickSelectAll(e) {
  954.     e.preventDefault();
  955.     // Early returns.
  956.     if (this.selectAll.querySelector('input').disabled) {
  957.       return;
  958.     }
  959.     const checked = Select.#checkCheckbox(e);
  960.     const options = Array.from(this.select.options).filter((o) => !o.disabled);
  961.     const checkboxes = Array.from(
  962.       this.searchContainer.querySelectorAll('[data-visible="true"]'),
  963.     ).filter((checkbox) => !checkbox.querySelector('input').disabled);
  965.     checkboxes.forEach((checkbox) => {
  966.       checkbox.querySelector('input').checked = checked;
  967.       const option = options.find(
  968.         (o) => o.text === checkbox.getAttribute('data-select-multiple-value'),
  969.       );
  971.       if (option) {
  972.         if (checked) {
  973.           option.selected = true;
  974.         } else {
  975.           option.selected = false;
  976.         }
  977.       }
  978.     });
  980.     this.update();
  981.     this.trigger('onSelectAll', { selected: options });
  982.   }
  984.   /**
  985.    * Event callback to handle moving the focus out of the select.
  986.    *
  987.    * @param {Event} e
  988.    * @type {function}
  989.    */
  990.   handleFocusout(e) {
  991.     if (
  992.       e.relatedTarget &&
  993.       this.selectMultiple &&
  994.       !this.selectMultiple.contains(e.relatedTarget) &&
  995.       this.searchContainer.style.display === 'block'
  996.     ) {
  997.       this.searchContainer.style.display = 'none';
  998.       this.input.classList.remove('ecl-select--active');
  999.       this.input.setAttribute('aria-expanded', false);
  1000.     } else if (
  1001.       e.relatedTarget &&
  1002.       !this.selectMultiple &&
  1003.       !this.select.parentNode.contains(e.relatedTarget)
  1004.     ) {
  1005.       this.select.blur();
  1006.     }
  1007.   }
  1009.   /**
  1010.    * Event callback to handle the user typing in the search field.
  1011.    *
  1012.    * @param {Event} e
  1013.    * @fires Select#onSearch
  1014.    * @type {function}
  1015.    */
  1016.   handleSearch(e) {
  1017.     const dropDownHeight = this.optionsContainer.offsetHeight;
  1018.     this.visibleOptions = [];
  1019.     const keyword = e.target.value.toLowerCase();
  1020.     let eventDetails = {};
  1021.     if (dropDownHeight > 0) {
  1022.       this.optionsContainer.style.height = `${dropDownHeight}px`;
  1023.     }
  1024.     this.checkboxes.forEach((checkbox) => {
  1025.       if (
  1026.         !checkbox
  1027.           .getAttribute('data-select-multiple-value')
  1028.           .toLocaleLowerCase()
  1029.           .includes(keyword)
  1030.       ) {
  1031.         checkbox.removeAttribute('data-visible');
  1032.         checkbox.style.display = 'none';
  1033.       } else {
  1034.         checkbox.setAttribute('data-visible', true);
  1035.         checkbox.style.display = 'flex';
  1036.         // Highlight keyword in checkbox label.
  1037.         const checkboxLabelText = checkbox.querySelector(
  1038.           '.ecl-checkbox__label-text',
  1039.         );
  1040.         checkboxLabelText.textContent = checkboxLabelText.textContent.replace(
  1041.           '.cls-1{fill:none}',
  1042.           '',
  1043.         );
  1044.         if (keyword) {
  1045.           checkboxLabelText.innerHTML = checkboxLabelText.textContent.replace(
  1046.             new RegExp(`${keyword}(?!([^<]+)?<)`, 'gi'),
  1047.             '<b>$&</b>',
  1048.           );
  1049.         }
  1050.         this.visibleOptions.push(checkbox);
  1051.       }
  1052.     });
  1053.     // Select all checkbox follows along.
  1054.     const checked = this.visibleOptions.filter(
  1055.       (c) => c.querySelector('input').checked,
  1056.     );
  1057.     if (
  1058.       this.visibleOptions.length === 0 ||
  1059.       this.visibleOptions.length !== checked.length
  1060.     ) {
  1061.       this.selectAll.querySelector('input').checked = false;
  1062.     } else {
  1063.       this.selectAll.querySelector('input').checked = true;
  1064.     }
  1065.     // Display no-results message.
  1066.     const noResultsElement = this.searchContainer.querySelector(
  1067.       '.ecl-select__multiple-no-results',
  1068.     );
  1069.     const groups = this.optionsContainer.getElementsByClassName(
  1070.       'ecl-select__multiple-group',
  1071.     );
  1072.     // eslint-disable-next-line no-restricted-syntax
  1073.     for (const group of groups) {
  1074.       group.style.display = 'none';
  1075.       // eslint-disable-next-line no-restricted-syntax
  1076.       const groupedCheckboxes = [...group.children].filter((node) =>
  1077.         node.classList.contains('ecl-checkbox'),
  1078.       );
  1079.       groupedCheckboxes.forEach((single) => {
  1080.         if (single.hasAttribute('data-visible')) {
  1081.           single.closest('.ecl-select__multiple-group').style.display = 'block';
  1082.         }
  1083.       });
  1084.     }
  1086.     if (this.visibleOptions.length === 0 && !noResultsElement) {
  1087.       // Create no-results element.
  1088.       const noResultsContainer = document.createElement('div');
  1089.       const noResultsLabel = document.createElement('span');
  1090.       noResultsContainer.classList.add('ecl-select__multiple-no-results');
  1091.       noResultsLabel.innerHTML = this.textNoResults;
  1092.       noResultsContainer.appendChild(noResultsLabel);
  1093.       this.optionsContainer.appendChild(noResultsContainer);
  1094.     } else if (this.visibleOptions.length > 0 && noResultsElement !== null) {
  1095.       noResultsElement.parentNode.removeChild(noResultsElement);
  1096.     }
  1097.     // reset
  1098.     if (keyword.length === 0) {
  1099.       this.checkboxes.forEach((checkbox) => {
  1100.         checkbox.setAttribute('data-visible', true);
  1101.         checkbox.style.display = 'flex';
  1102.       });
  1103.       // Enable select all checkbox.
  1104.       this.selectAll.classList.remove('ecl-checkbox--disabled');
  1105.       this.selectAll.querySelector('input').disabled = false;
  1106.     } else {
  1107.       // Disable select all checkbox.
  1108.       this.selectAll.classList.add('ecl-checkbox--disabled');
  1109.       this.selectAll.querySelector('input').disabled = true;
  1110.     }
  1111.     if (this.visibleOptions.length > 0) {
  1112.       const visibleLabels = this.visibleOptions.map((option) => {
  1113.         let label = null;
  1114.         const labelEl = queryOne('.ecl-checkbox__label-text', option);
  1115.         if (labelEl) {
  1116.           label = labelEl.innerHTML.replace(/<\/?b>/g, '');
  1117.         }
  1118.         return label || '';
  1119.       });
  1120.       eventDetails = {
  1121.         results: visibleLabels,
  1122.         text: e.target.value.toLowerCase(),
  1123.       };
  1124.     } else {
  1125.       eventDetails = { results: 'none', text: e.target.value.toLowerCase() };
  1126.     }
  1127.     this.trigger('onSearch', eventDetails);
  1128.   }
  1130.   /**
  1131.    * Event callback to handle the click outside the select.
  1132.    *
  1133.    * @param {Event} e
  1134.    * @type {function}
  1135.    */
  1136.   handleClickOutside(e) {
  1137.     if (
  1138.       e.target &&
  1139.       this.selectMultiple &&
  1140.       !this.selectMultiple.contains(e.target) &&
  1141.       this.searchContainer.style.display === 'block'
  1142.     ) {
  1143.       this.searchContainer.style.display = 'none';
  1144.       this.input.classList.remove('ecl-select--active');
  1145.       this.input.setAttribute('aria-expanded', false);
  1146.     }
  1147.   }
  1149.   /**
  1150.    * Event callback to handle keyboard events on the select.
  1151.    *
  1152.    * @param {Event} e
  1153.    * @type {function}
  1154.    */
  1155.   handleKeyboardOnSelect(e) {
  1156.     switch (e.key) {
  1157.       case 'Escape':
  1158.         e.preventDefault();
  1159.         this.handleEsc(e);
  1160.         break;
  1162.       case ' ':
  1163.       case 'Enter':
  1164.         if (this.multiple) {
  1165.           e.preventDefault();
  1166.           this.handleToggle(e);
  1167.           this.search.focus();
  1168.         }
  1169.         break;
  1171.       case 'ArrowDown':
  1172.         if (this.multiple) {
  1173.           e.preventDefault();
  1174.           this.handleToggle(e);
  1175.           this.search.focus();
  1176.         }
  1177.         break;
  1179.       default:
  1180.     }
  1181.   }
  1183.   /**
  1184.    * Event callback to handle keyboard events on the select all checkbox.
  1185.    *
  1186.    * @param {Event} e
  1187.    * @type {function}
  1188.    */
  1189.   handleKeyboardOnSelectAll(e) {
  1190.     switch (e.key) {
  1191.       case 'Escape':
  1192.         e.preventDefault();
  1193.         this.handleEsc(e);
  1194.         break;
  1196.       case 'ArrowDown':
  1197.         e.preventDefault();
  1198.         if (this.visibleOptions.length > 0) {
  1199.           this.visibleOptions[0].querySelector('input').focus();
  1200.         } else {
  1201.           this.input.focus();
  1202.         }
  1203.         break;
  1205.       case 'ArrowUp':
  1206.         e.preventDefault();
  1207.         this.search.focus();
  1208.         break;
  1210.       case 'Tab':
  1211.         e.preventDefault();
  1212.         if (e.shiftKey) {
  1213.           this.search.focus();
  1214.         } else if (this.visibleOptions.length > 0) {
  1215.           this.visibleOptions[0].querySelector('input').focus();
  1216.         } else {
  1217.           this.input.focus();
  1218.         }
  1219.         break;
  1221.       default:
  1222.     }
  1223.   }
  1225.   /**
  1226.    * Event callback to handle keyboard events on the dropdown.
  1227.    *
  1228.    * @param {Event} e
  1229.    * @type {function}
  1230.    */
  1231.   handleKeyboardOnOptions(e) {
  1232.     switch (e.key) {
  1233.       case 'Escape':
  1234.         e.preventDefault();
  1235.         this.handleEsc(e);
  1236.         break;
  1238.       case 'ArrowDown':
  1239.         e.preventDefault();
  1240.         this.#moveFocus('down', false);
  1241.         break;
  1243.       case 'ArrowUp':
  1244.         e.preventDefault();
  1245.         this.#moveFocus('up');
  1246.         break;
  1248.       case 'Tab':
  1249.         e.preventDefault();
  1250.         if (e.shiftKey) {
  1251.           this.#moveFocus('up');
  1252.         } else {
  1253.           this.#moveFocus('down');
  1254.         }
  1255.         break;
  1257.       default:
  1258.     }
  1259.   }
  1261.   /**
  1262.    * Event callback to handle keyboard events
  1263.    *
  1264.    * @param {Event} e
  1265.    * @type {function}
  1266.    */
  1267.   handleKeyboardOnSearch(e) {
  1268.     switch (e.key) {
  1269.       case 'Escape':
  1270.         e.preventDefault();
  1271.         this.handleEsc(e);
  1272.         break;
  1274.       case 'ArrowDown':
  1275.         e.preventDefault();
  1276.         if (this.selectAll.querySelector('input').disabled) {
  1277.           if (this.visibleOptions.length > 0) {
  1278.             this.visibleOptions[0].querySelector('input').focus();
  1279.           } else {
  1280.             this.input.focus();
  1281.           }
  1282.         } else {
  1283.           this.selectAll.querySelector('input').focus();
  1284.         }
  1285.         break;
  1287.       case 'ArrowUp':
  1288.         e.preventDefault();
  1289.         this.input.focus();
  1290.         this.handleToggle(e);
  1291.         break;
  1293.       default:
  1294.     }
  1295.   }
  1297.   /**
  1298.    * Event callback to handle the click on an option.
  1299.    *
  1300.    * @param {Event} e
  1301.    * @type {function}
  1302.    */
  1303.   handleKeyboardOnOption(e) {
  1304.     if (e.key === 'Enter' || e.key === ' ') {
  1305.       e.preventDefault();
  1306.       this.handleClickOption(e);
  1307.     }
  1308.   }
  1310.   /**
  1311.    * Event callback to handle keyboard events on the clear all button.
  1312.    *
  1313.    * @param {Event} e
  1314.    * @fires Select#onReset
  1315.    * @type {function}
  1316.    */
  1317.   handleKeyboardOnClearAll(e) {
  1318.     e.preventDefault();
  1320.     switch (e.key) {
  1321.       case 'Enter':
  1322.       case ' ':
  1323.         this.handleClickOnClearAll(e);
  1324.         this.trigger('onReset', e);
  1325.         this.input.focus();
  1326.         break;
  1328.       case 'ArrowDown':
  1329.         this.input.focus();
  1330.         break;
  1332.       case 'ArrowUp':
  1333.         if (this.closeButton) {
  1334.           this.closeButton.focus();
  1335.         } else {
  1336.           // eslint-disable-next-line no-lonely-if
  1337.           if (this.visibleOptions.length > 0) {
  1338.             this.visibleOptions[this.visibleOptions.length - 1]
  1339.               .querySelector('input')
  1340.               .focus();
  1341.           } else {
  1342.             this.search.focus();
  1343.           }
  1344.         }
  1345.         break;
  1347.       case 'Tab':
  1348.         if (e.shiftKey) {
  1349.           if (this.closeButton) {
  1350.             this.closeButton.focus();
  1351.           } else {
  1352.             // eslint-disable-next-line no-lonely-if
  1353.             if (this.visibleOptions.length > 0) {
  1354.               this.visibleOptions[this.visibleOptions.length - 1]
  1355.                 .querySelector('input')
  1356.                 .focus();
  1357.             } else {
  1358.               this.search.focus();
  1359.             }
  1360.           }
  1361.         } else {
  1362.           this.input.focus();
  1363.           this.handleToggle(e);
  1364.         }
  1365.         break;
  1367.       default:
  1368.     }
  1369.   }
  1371.   /**
  1372.    * Event callback for handling keyboard events in the close button.
  1373.    *
  1374.    * @param {Event} e
  1375.    * @type {function}
  1376.    */
  1377.   handleKeyboardOnClose(e) {
  1378.     e.preventDefault();
  1380.     switch (e.key) {
  1381.       case 'Enter':
  1382.       case ' ':
  1383.         this.handleEsc(e);
  1384.         this.input.focus();
  1385.         break;
  1387.       case 'ArrowUp':
  1388.         if (this.visibleOptions.length > 0) {
  1389.           this.visibleOptions[this.visibleOptions.length - 1]
  1390.             .querySelector('input')
  1391.             .focus();
  1392.         } else {
  1393.           this.input.focus();
  1394.           this.handleToggle(e);
  1395.         }
  1396.         break;
  1398.       case 'ArrowDown':
  1399.         if (this.clearAllButton) {
  1400.           this.clearAllButton.focus();
  1401.         } else {
  1402.           this.input.focus();
  1403.           this.handleToggle(e);
  1404.         }
  1405.         break;
  1407.       case 'Tab':
  1408.         if (!e.shiftKey) {
  1409.           if (this.clearAllButton) {
  1410.             this.clearAllButton.focus();
  1411.           } else {
  1412.             this.input.focus();
  1413.             this.handleToggle(e);
  1414.           }
  1415.         } else {
  1416.           // eslint-disable-next-line no-lonely-if
  1417.           if (this.visibleOptions.length > 0) {
  1418.             this.visibleOptions[this.visibleOptions.length - 1]
  1419.               .querySelector('input')
  1420.               .focus();
  1421.           } else {
  1422.             this.input.focus();
  1423.             this.handleToggle(e);
  1424.           }
  1425.         }
  1426.         break;
  1428.       default:
  1429.     }
  1430.   }
  1432.   /**
  1433.    * Event callback to handle different events which will close the dropdown.
  1434.    *
  1435.    * @param {Event} e
  1436.    * @type {function}
  1437.    */
  1438.   handleEsc(e) {
  1439.     if (this.multiple) {
  1440.       e.preventDefault();
  1441.       this.searchContainer.style.display = 'none';
  1442.       this.input.setAttribute('aria-expanded', false);
  1443.       this.input.blur();
  1444.       this.input.classList.remove('ecl-select--active');
  1445.     } else {
  1446.       this.select.classList.remove('ecl-select--active');
  1447.     }
  1448.   }
  1450.   /**
  1451.    * Event callback to handle the click on the clear all button.
  1452.    *
  1453.    * @param {Event} e
  1454.    * @fires Select#onReset
  1455.    * @type {function}
  1456.    */
  1457.   handleClickOnClearAll(e) {
  1458.     e.preventDefault();
  1459.     Array.from(this.select.options).forEach((option) => {
  1460.       const checkbox = this.selectMultiple.querySelector(
  1461.         `[data-select-multiple-value="${option.text}"]`,
  1462.       );
  1463.       const input = checkbox.querySelector('.ecl-checkbox__input');
  1464.       input.checked = false;
  1465.       option.selected = false;
  1466.     });
  1468.     this.selectAll.querySelector('.ecl-checkbox__input').checked = false;
  1469.     this.update(0);
  1470.     this.trigger('onReset', e);
  1471.   }
  1473.   /**
  1474.    * Event callback to reset the multiple select on form reset.
  1475.    *
  1476.    * @type {function}
  1477.    */
  1478.   resetForm() {
  1479.     if (this.multiple) {
  1480.       // A slight timeout is necessary to execute the function just after the original reset of the form.
  1481.       setTimeout(() => {
  1482.         Array.from(this.select.options).forEach((option) => {
  1483.           const checkbox = this.selectMultiple.querySelector(
  1484.             `[data-select-multiple-value="${option.text}"]`,
  1485.           );
  1486.           const input = checkbox.querySelector('.ecl-checkbox__input');
  1487.           if (input.checked) {
  1488.             option.selected = true;
  1489.           } else {
  1490.             option.selected = false;
  1491.           }
  1492.         });
  1493.         this.update(0);
  1494.       }, 10);
  1495.     }
  1496.   }
  1497. }
  1499. export default Select;