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 three methods are actually used:
  18.  * handleToggle(), handleKeyboardOnSelect() and handleEsc().
  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.       input.setAttribute('disabled', disabled);
  232.     }
  234.     // Imperative work follows.
  235.     checkbox.classList.add('ecl-checkbox');
  236.     checkbox.setAttribute('data-select-multiple-value', text);
  237.     input.classList.add('ecl-checkbox__input');
  238.     input.setAttribute('type', 'checkbox');
  239.     input.setAttribute('id', `${ctx}-${id}`);
  240.     input.setAttribute('name', `${ctx}-${id}`);
  241.     checkbox.appendChild(input);
  242.     label.classList.add('ecl-checkbox__label');
  243.     label.setAttribute('for', `${ctx}-${id}`);
  244.     box.classList.add('ecl-checkbox__box');
  245.     box.setAttribute('aria-hidden', true);
  246.     box.appendChild(
  247.       Select.#createSvgIcon(
  248.         iconSvgAllCheck,
  249.         'ecl-icon ecl-icon--s ecl-checkbox__icon',
  250.       ),
  251.     );
  252.     label.appendChild(box);
  253.     labelText.classList.add('ecl-checkbox__label-text');
  254.     labelText.innerHTML = text;
  255.     label.appendChild(labelText);
  256.     checkbox.appendChild(label);
  257.     return checkbox;
  258.   }
  260.   /**
  261.    * Static method to generate the select icon
  262.    *
  263.    * @static
  264.    * @private
  265.    * @returns {HTMLElement}
  266.    */
  267.   static #createSelectIcon() {
  268.     const wrapper = document.createElement('div');
  269.     wrapper.classList.add('ecl-select__icon');
  270.     const button = document.createElement('button');
  271.     button.classList.add(
  272.       'ecl-button',
  273.       'ecl-button--ghost',
  274.       'ecl-button--icon-only',
  275.     );
  276.     button.setAttribute('tabindex', '-1');
  277.     const labelWrapper = document.createElement('span');
  278.     labelWrapper.classList.add('ecl-button__container');
  279.     const label = document.createElement('span');
  280.     label.classList.add('ecl-button__label');
  281.     label.textContent = 'Toggle dropdown';
  282.     labelWrapper.appendChild(label);
  283.     const icon = Select.#createSvgIcon(
  284.       iconSvgAllCornerArrow,
  285.       `ecl-icon ecl-icon--${iconSize} ecl-icon--rotate-180`,
  286.     );
  287.     labelWrapper.appendChild(icon);
  288.     button.appendChild(labelWrapper);
  289.     wrapper.appendChild(button);
  290.     return wrapper;
  291.   }
  293.   /**
  294.    * Static method to programmatically check an ECL-specific checkbox when previously default has been prevented.
  295.    *
  296.    * @static
  297.    * @param {Event} e
  298.    * @private
  299.    */
  300.   static #checkCheckbox(e) {
  301.     const input = e.target.closest('.ecl-checkbox').querySelector('input');
  302.     input.checked = !input.checked;
  304.     return input.checked;
  305.   }
  307.   /**
  308.    * Static method to generate a random string
  309.    *
  310.    * @static
  311.    * @param {number} length
  312.    * @private
  313.    */
  314.   static #generateRandomId(length) {
  315.     return Math.random().toString(36).substr(2, length);
  316.   }
  318.   /**
  319.    * Initialise component.
  320.    */
  321.   init() {
  322.     if (!ECL) {
  323.       throw new TypeError('Called init but ECL is not present');
  324.     }
  325.     ECL.components = ECL.components || new Map();
  327.     this.select = this.element;
  329.     if (this.multiple) {
  330.       const containerClasses = Array.from(this.select.parentElement.classList);
  331.       this.textDefault =
  332.         this.defaultText ||
  333.         this.element.getAttribute(this.defaultTextAttribute);
  334.       this.textSearch =
  335.         this.searchText || this.element.getAttribute(this.searchTextAttribute);
  336.       this.textSelectAll =
  337.         this.selectAllText ||
  338.         this.element.getAttribute(this.selectAllTextAttribute);
  339.       this.textNoResults =
  340.         this.noResultsText ||
  341.         this.element.getAttribute(this.noResultsTextAttribute);
  342.       this.closeButtonLabel =
  343.         this.closeButtonLabel ||
  344.         this.element.getAttribute(this.closeLabelAttribute);
  345.       this.clearAllButtonLabel =
  346.         this.clearAllButtonLabel ||
  347.         this.element.getAttribute(this.clearAllLabelAttribute);
  348.       // Retrieve the id from the markup or generate one.
  349.       this.selectMultipleId =
  350.         this.element.id || `select-multiple-${Select.#generateRandomId(4)}`;
  351.       this.element.id = this.selectMultipleId;
  353.       this.formGroup = this.element.closest('.ecl-form-group');
  354.       if (this.formGroup) {
  355.         this.formGroup.setAttribute('role', 'application');
  356.         this.label = queryOne('.ecl-form-label', this.formGroup);
  357.         this.helper = queryOne('.ecl-help-block', this.formGroup);
  358.         this.invalid = queryOne('.ecl-feedback-message', this.formGroup);
  359.       }
  361.       // Disable focus on default select
  362.       this.select.setAttribute('tabindex', '-1');
  364.       this.selectMultiple = document.createElement('div');
  365.       this.selectMultiple.classList.add('ecl-select__multiple');
  366.       // Close the searchContainer when tabbing out of the selectMultiple
  367.       this.selectMultiple.addEventListener('focusout', this.handleFocusout);
  369.       this.inputContainer = document.createElement('div');
  370.       this.inputContainer.classList.add(...containerClasses);
  371.       this.selectMultiple.appendChild(this.inputContainer);
  373.       this.input = document.createElement('button');
  374.       this.input.classList.add('ecl-select', 'ecl-select__multiple-toggle');
  375.       this.input.setAttribute('type', 'button');
  376.       this.input.setAttribute(
  377.         'aria-controls',
  378.         `${this.selectMultipleId}-dropdown`,
  379.       );
  380.       this.input.setAttribute('id', `${this.selectMultipleId}-toggle`);
  381.       this.input.setAttribute('aria-expanded', false);
  382.       if (containerClasses.find((c) => c.includes('disabled'))) {
  383.         this.input.setAttribute('disabled', true);
  384.       }
  386.       // Add accessibility attributes
  387.       if (this.label) {
  388.         this.label.setAttribute('for', `${this.selectMultipleId}-toggle`);
  389.         this.input.setAttribute('aria-labelledby', this.label.id);
  390.       }
  391.       let describedby = '';
  392.       if (this.helper) {
  393.         describedby = this.helper.id;
  394.       }
  395.       if (this.invalid) {
  396.         describedby = describedby
  397.           ? `${describedby} ${this.invalid.id}`
  398.           : this.invalid.id;
  399.       }
  400.       if (describedby) {
  401.         this.input.setAttribute('aria-describedby', describedby);
  402.       }
  404.       this.input.addEventListener('keydown', this.handleKeyboardOnSelect);
  405.       this.input.addEventListener('click', this.handleToggle);
  406.       this.selectionCount = document.createElement('div');
  407.       this.selectionCount.classList.add(
  408.         this.selectMultiplesSelectionCountSelector,
  409.       );
  410.       this.selectionCountText = document.createElement('span');
  411.       this.selectionCount.appendChild(this.selectionCountText);
  413.       this.inputContainer.appendChild(this.selectionCount);
  414.       this.inputContainer.appendChild(this.input);
  415.       this.inputContainer.appendChild(Select.#createSelectIcon());
  417.       this.searchContainer = document.createElement('div');
  418.       this.searchContainer.style.display = 'none';
  419.       this.searchContainer.classList.add(
  420.         'ecl-select__multiple-dropdown',
  421.         ...containerClasses,
  422.       );
  424.       this.searchContainer.setAttribute(
  425.         'id',
  426.         `${this.selectMultipleId}-dropdown`,
  427.       );
  429.       this.selectMultiple.appendChild(this.searchContainer);
  431.       this.search = document.createElement('input');
  432.       this.search.classList.add('ecl-text-input');
  433.       this.search.setAttribute('type', 'search');
  434.       this.search.setAttribute('placeholder', this.textSearch || '');
  435.       this.search.addEventListener('keyup', this.handleSearch);
  436.       this.search.addEventListener('search', this.handleSearch);
  437.       this.searchContainer.appendChild(this.search);
  439.       if (this.textSelectAll) {
  440.         const optionsCount = Array.from(this.select.options).filter(
  441.           (option) => !option.disabled,
  442.         ).length;
  444.         this.selectAll = Select.#createCheckbox(
  445.           {
  446.             id: `all-${Select.#generateRandomId(4)}`,
  447.             text: `${this.textSelectAll} (${optionsCount})`,
  448.             extraClass: 'ecl-select__multiple-all',
  449.           },
  450.           this.selectMultipleId,
  451.         );
  452.         this.selectAll.addEventListener('click', this.handleClickSelectAll);
  453.         this.selectAll.addEventListener('keypress', this.handleClickSelectAll);
  454.         this.selectAll.addEventListener('change', this.handleClickSelectAll);
  455.         this.searchContainer.appendChild(this.selectAll);
  456.       }
  458.       this.search.addEventListener('keydown', this.handleKeyboardOnSearch);
  459.       this.optionsContainer = document.createElement('div');
  460.       this.optionsContainer.classList.add('ecl-select__multiple-options');
  461.       this.searchContainer.appendChild(this.optionsContainer);
  462.       // Toolbar
  463.       if (this.clearAllButtonLabel || this.closeButtonLabel) {
  464.         this.dropDownToolbar = document.createElement('div');
  465.         this.dropDownToolbar.classList.add('ecl-select-multiple-toolbar');
  467.         if (this.closeButtonLabel) {
  468.           this.closeButton = document.createElement('button');
  469.           this.closeButton.textContent = this.closeButtonLabel;
  470.           this.closeButton.classList.add('ecl-button', 'ecl-button--primary');
  471.           this.closeButton.addEventListener('click', this.handleEsc);
  472.           this.closeButton.addEventListener(
  473.             'keydown',
  474.             this.handleKeyboardOnClose,
  475.           );
  477.           if (this.dropDownToolbar) {
  478.             this.dropDownToolbar.appendChild(this.closeButton);
  479.             this.searchContainer.appendChild(this.dropDownToolbar);
  480.             this.dropDownToolbar.style.display = 'none';
  481.           }
  482.         }
  484.         if (this.clearAllButtonLabel) {
  485.           this.clearAllButton = document.createElement('button');
  486.           this.clearAllButton.textContent = this.clearAllButtonLabel;
  487.           this.clearAllButton.classList.add(
  488.             'ecl-button',
  489.             'ecl-button--secondary',
  490.           );
  491.           this.clearAllButton.addEventListener(
  492.             'click',
  493.             this.handleClickOnClearAll,
  494.           );
  495.           this.clearAllButton.addEventListener(
  496.             'keydown',
  497.             this.handleKeyboardOnClearAll,
  498.           );
  499.           this.dropDownToolbar.appendChild(this.clearAllButton);
  500.         }
  501.       }
  503.       this.selectAll.addEventListener(
  504.         'keydown',
  505.         this.handleKeyboardOnSelectAll,
  506.       );
  507.       this.optionsContainer.addEventListener(
  508.         'keydown',
  509.         this.handleKeyboardOnOptions,
  510.       );
  512.       if (this.select.options && this.select.options.length > 0) {
  513.         this.checkboxes = Array.from(this.select.options).map((option) => {
  514.           let optgroup = '';
  515.           let checkbox = '';
  516.           if (option.parentNode.tagName === 'OPTGROUP') {
  517.             if (
  518.               !queryOne(
  519.                 `fieldset[data-ecl-multiple-group="${option.parentNode.getAttribute(
  520.                   'label',
  521.                 )}"]`,
  522.                 this.optionsContainer,
  523.               )
  524.             ) {
  525.               optgroup = document.createElement('fieldset');
  526.               const title = document.createElement('legend');
  527.               title.classList.add('ecl-select__multiple-group__title');
  528.               title.innerHTML = option.parentNode.getAttribute('label');
  529.               optgroup.appendChild(title);
  530.               optgroup.setAttribute(
  531.                 'data-ecl-multiple-group',
  532.                 option.parentNode.getAttribute('label'),
  533.               );
  534.               optgroup.classList.add('ecl-select__multiple-group');
  535.               this.optionsContainer.appendChild(optgroup);
  536.             } else {
  537.               optgroup = queryOne(
  538.                 `fieldset[data-ecl-multiple-group="${option.parentNode.getAttribute(
  539.                   'label',
  540.                 )}"]`,
  541.                 this.optionsContainer,
  542.               );
  543.             }
  544.           }
  546.           if (option.selected) {
  547.             this.#updateSelectionsCount(1);
  548.             if (this.dropDownToolbar) {
  549.               this.dropDownToolbar.style.display = 'flex';
  550.             }
  551.           }
  552.           checkbox = Select.#createCheckbox(
  553.             {
  554.               // spread operator does not work in storybook context so we map 1:1
  555.               id: option.value,
  556.               text: option.text,
  557.               disabled: option.disabled,
  558.               selected: option.selected,
  559.             },
  560.             this.selectMultipleId,
  561.           );
  563.           checkbox.setAttribute('data-visible', true);
  564.           if (!checkbox.classList.contains('ecl-checkbox--disabled')) {
  565.             checkbox.addEventListener('click', this.handleClickOption);
  566.             checkbox.addEventListener('keydown', this.handleKeyboardOnOption);
  567.           }
  568.           if (optgroup) {
  569.             optgroup.appendChild(checkbox);
  570.           } else {
  571.             this.optionsContainer.appendChild(checkbox);
  572.           }
  574.           return checkbox;
  575.         });
  576.       } else {
  577.         this.checkboxes = [];
  578.       }
  579.       this.visibleOptions = this.checkboxes;
  581.       this.select.parentNode.parentNode.insertBefore(
  582.         this.selectMultiple,
  583.         this.select.parentNode.nextSibling,
  584.       );
  586.       this.select.parentNode.classList.add('ecl-select__container--hidden');
  588.       // Respect default selected options.
  589.       this.#updateCurrentValue();
  591.       this.form = this.element.closest('form');
  592.       if (this.form) {
  593.         this.form.addEventListener('reset', this.resetForm);
  594.       }
  595.     } else {
  596.       this.shouldHandleClick = true;
  597.       this.select.addEventListener('keydown', this.handleKeyboardOnSelect);
  598.       this.select.addEventListener('blur', this.handleEsc);
  599.       this.select.addEventListener('click', this.handleToggle, true);
  600.       this.select.addEventListener('mousedown', this.handleToggle, true);
  601.     }
  603.     document.addEventListener('click', this.handleClickOutside);
  605.     // Set ecl initialized attribute
  606.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  607.     ECL.components.set(this.element, this);
  608.   }
  610.   /**
  611.    * Update instance.
  612.    *
  613.    * @param {Integer} i
  614.    */
  615.   update(i) {
  616.     this.#updateCurrentValue();
  617.     this.#updateSelectionsCount(i);
  618.   }
  620.   /**
  621.    * Set the selected value(s) programmatically.
  622.    *
  623.    * @param {string | Array<string>} values - A string or an array of values or labels to set as selected.
  624.    * @param {string} [op='replace'] - The operation mode. Use 'add' to keep the previous selections.
  625.    * @throws {Error} Throws an error if an invalid operation mode is provided.
  626.    *
  627.    * @example
  628.    * // Replace current selection with new values
  629.    * setCurrentValue(['value1', 'value2']);
  630.    *
  631.    * // Add to current selection without clearing previous selections
  632.    * setCurrentValue(['value3', 'value4'], 'add');
  633.    *
  634.    */
  635.   setCurrentValue(values, op = 'replace') {
  636.     if (op !== 'replace' && op !== 'add') {
  637.       throw new Error('Invalid operation mode. Use "replace" or "add".');
  638.     }
  640.     const valuesArray = typeof values === 'string' ? [values] : values;
  642.     Array.from(this.select.options).forEach((option) => {
  643.       if (op === 'replace') {
  644.         option.selected = false;
  645.       }
  646.       if (
  647.         valuesArray.includes(option.value) ||
  648.         valuesArray.includes(option.label)
  649.       ) {
  650.         option.selected = true;
  651.       }
  652.     });
  654.     this.update();
  655.   }
  657.   /**
  658.    * Event callback to show/hide the dropdown
  659.    *
  660.    * @param {Event} e
  661.    * @fires Select#onToggle
  662.    * @type {function}
  663.    */
  664.   handleToggle(e) {
  665.     if (this.multiple) {
  666.       e.preventDefault();
  667.       this.input.classList.toggle('ecl-select--active');
  668.       if (this.searchContainer.style.display === 'none') {
  669.         this.searchContainer.style.display = 'block';
  670.         this.input.setAttribute('aria-expanded', true);
  671.         this.isOpen = true;
  672.       } else {
  673.         this.searchContainer.style.display = 'none';
  674.         this.input.setAttribute('aria-expanded', false);
  675.         this.isOpen = false;
  676.       }
  677.     } else if (e.type === 'click' && !this.shouldHandleClick) {
  678.       this.shouldHandleClick = true;
  679.       this.select.classList.toggle('ecl-select--active');
  680.     } else if (e.type === 'mousedown' && this.shouldHandleClick) {
  681.       this.shouldHandleClick = false;
  682.       this.select.classList.toggle('ecl-select--active');
  683.     } else if (e.type === 'keydown') {
  684.       this.shouldHandleClick = false;
  685.       this.select.classList.toggle('ecl-select--active');
  686.     }
  688.     const eventData = { opened: this.isOpen, e };
  689.     this.trigger('onToggle', eventData);
  690.   }
  692.   /**
  693.    * Register a callback function for a specific event.
  694.    *
  695.    * @param {string} eventName - The name of the event to listen for.
  696.    * @param {Function} callback - The callback function to be invoked when the event occurs.
  697.    * @returns {void}
  698.    * @memberof Select
  699.    * @instance
  700.    *
  701.    * @example
  702.    * // Registering a callback for the 'onToggle' event
  703.    * select.on('onToggle', (event) => {
  704.    *   console.log('Toggle event occurred!', event);
  705.    * });
  706.    */
  707.   on(eventName, callback) {
  708.     this.eventManager.on(eventName, callback);
  709.   }
  711.   /**
  712.    * Trigger a component event.
  713.    *
  714.    * @param {string} eventName - The name of the event to trigger.
  715.    * @param {any} eventData - Data associated with the event.
  716.    * @memberof Select
  717.    * @instance
  718.    *
  719.    */
  720.   trigger(eventName, eventData) {
  721.     this.eventManager.trigger(eventName, eventData);
  722.   }
  724.   /**
  725.    * Destroy the component instance.
  726.    */
  727.   destroy() {
  728.     if (this.multiple) {
  729.       this.selectMultiple.removeEventListener('focusout', this.handleFocusout);
  730.       this.input.removeEventListener('keydown', this.handleKeyboardOnSelect);
  731.       this.input.removeEventListener('click', this.handleToggle);
  732.       this.search.removeEventListener('keyup', this.handleSearch);
  733.       this.search.removeEventListener('keydown', this.handleKeyboardOnSearch);
  734.       this.selectAll.removeEventListener('click', this.handleClickSelectAll);
  735.       this.selectAll.removeEventListener('keypress', this.handleClickSelectAll);
  736.       this.selectAll.removeEventListener(
  737.         'keydown',
  738.         this.handleKeyboardOnSelectAll,
  739.       );
  740.       this.optionsContainer.removeEventListener(
  741.         'keydown',
  742.         this.handleKeyboardOnOptions,
  743.       );
  744.       this.checkboxes.forEach((checkbox) => {
  745.         checkbox.removeEventListener('click', this.handleClickSelectAll);
  746.         checkbox.removeEventListener('click', this.handleClickOption);
  747.         checkbox.removeEventListener('keydown', this.handleKeyboardOnOption);
  748.       });
  749.       document.removeEventListener('click', this.handleClickOutside);
  750.       if (this.closeButton) {
  751.         this.closeButton.removeEventListener('click', this.handleEsc);
  752.         this.closeButton.removeEventListener(
  753.           'keydown',
  754.           this.handleKeyboardOnClose,
  755.         );
  756.       }
  757.       if (this.clearAllButton) {
  758.         this.clearAllButton.removeEventListener(
  759.           'click',
  760.           this.handleClickOnClearAll,
  761.         );
  762.         this.clearAllButton.removeEventListener(
  763.           'keydown',
  764.           this.handleKeyboardOnClearAll,
  765.         );
  766.       }
  767.       if (this.selectMultiple) {
  768.         this.selectMultiple.remove();
  769.       }
  771.       this.select.parentNode.classList.remove('ecl-select__container--hidden');
  772.     } else {
  773.       this.select.removeEventListener('focus', this.handleToggle);
  774.     }
  776.     this.select.removeEventListener('blur', this.handleToggle);
  777.     document.removeEventListener('click', this.handleClickOutside);
  779.     if (this.element) {
  780.       this.element.removeAttribute('data-ecl-auto-initialized');
  781.       ECL.components.delete(this.element);
  782.     }
  783.   }
  785.   /**
  786.    * Private method to handle the update of the selected options counter.
  787.    *
  788.    * @param {Integer} i
  789.    * @private
  790.    */
  791.   #updateSelectionsCount(i) {
  792.     let selectedOptionsCount = 0;
  794.     if (i > 0) {
  795.       this.selectionCount.querySelector('span').innerHTML += i;
  796.     } else {
  797.       selectedOptionsCount = Array.from(this.select.options).filter(
  798.         (option) => option.selected,
  799.       ).length;
  800.     }
  801.     if (selectedOptionsCount > 0) {
  802.       this.selectionCount.querySelector('span').innerHTML =
  803.         selectedOptionsCount;
  804.       this.selectionCount.classList.add(
  805.         'ecl-select-multiple-selections-counter--visible',
  806.       );
  807.       if (this.dropDownToolbar) {
  808.         this.dropDownToolbar.style.display = 'flex';
  809.       }
  810.     } else {
  811.       this.selectionCount.classList.remove(
  812.         'ecl-select-multiple-selections-counter--visible',
  813.       );
  814.       if (this.dropDownToolbar) {
  815.         this.dropDownToolbar.style.display = 'none';
  816.       }
  817.     }
  819.     if (selectedOptionsCount >= 100) {
  820.       this.selectionCount.classList.add(
  821.         'ecl-select-multiple-selections-counter--xxl',
  822.       );
  823.     }
  824.   }
  826.   /**
  827.    * Private method to update the select value.
  828.    *
  829.    * @fires Select#onSelection
  830.    * @private
  831.    */
  832.   #updateCurrentValue() {
  833.     const optionSelected = Array.from(this.select.options)
  834.       .filter((option) => option.selected) // do not rely on getAttribute as it does not work in all cases
  835.       .map((option) => option.text)
  836.       .join(', ');
  838.     this.input.innerHTML = optionSelected || this.textDefault || '';
  840.     if (optionSelected !== '' && this.label) {
  841.       this.label.setAttribute(
  842.         'aria-label',
  843.         `${this.label.innerText} ${optionSelected}`,
  844.       );
  845.     } else if (optionSelected === '' && this.label) {
  846.       this.label.removeAttribute('aria-label');
  847.     }
  849.     this.trigger('onSelection', { selected: optionSelected });
  850.     // Dispatch a change event once the value of the select has changed.
  851.     this.select.dispatchEvent(new window.Event('change', { bubbles: true }));
  852.   }
  854.   /**
  855.    * Private method to handle the focus switch.
  856.    *
  857.    * @param {upOrDown}
  858.    * @private
  859.    */
  860.   #moveFocus(upOrDown) {
  861.     const activeEl = document.activeElement;
  862.     const hasGroups = activeEl.parentElement.parentElement.classList.contains(
  863.       'ecl-select__multiple-group',
  864.     );
  865.     const options = !hasGroups
  866.       ? Array.from(
  867.           activeEl.parentElement.parentElement.querySelectorAll(
  868.             '.ecl-checkbox__input',
  869.           ),
  870.         )
  871.       : Array.from(
  872.           activeEl.parentElement.parentElement.parentElement.querySelectorAll(
  873.             '.ecl-checkbox__input',
  874.           ),
  875.         );
  876.     const activeIndex = options.indexOf(activeEl);
  877.     if (upOrDown === 'down') {
  878.       const nextSiblings = options
  879.         .splice(activeIndex + 1, options.length)
  880.         .filter(
  881.           (el) => !el.disabled && el.parentElement.style.display !== 'none',
  882.         );
  883.       if (nextSiblings.length > 0) {
  884.         nextSiblings[0].focus();
  885.       } else {
  886.         // eslint-disable-next-line no-lonely-if
  887.         if (
  888.           this.dropDownToolbar &&
  889.           this.dropDownToolbar.style.display === 'flex'
  890.         ) {
  891.           this.dropDownToolbar.firstChild.focus();
  892.         } else {
  893.           this.input.focus();
  894.         }
  895.       }
  896.     } else {
  897.       const previousSiblings = options
  898.         .splice(0, activeIndex)
  899.         .filter(
  900.           (el) => !el.disabled && el.parentElement.style.display !== 'none',
  901.         );
  902.       if (previousSiblings.length > 0) {
  903.         previousSiblings[previousSiblings.length - 1].focus();
  904.       } else {
  905.         this.optionsContainer.scrollTop = 0;
  906.         if (!this.selectAll.querySelector('input').disabled) {
  907.           this.selectAll.querySelector('input').focus();
  908.         } else {
  909.           this.search.focus();
  910.         }
  911.       }
  912.     }
  913.   }
  915.   /**
  916.    * Event callback to handle the click on a checkbox.
  917.    *
  918.    * @param {Event} e
  919.    * @type {function}
  920.    */
  921.   handleClickOption(e) {
  922.     e.preventDefault();
  923.     Select.#checkCheckbox(e);
  925.     // Toggle values
  926.     const checkbox = e.target.closest('.ecl-checkbox');
  927.     Array.from(this.select.options).forEach((option) => {
  928.       if (option.text === checkbox.getAttribute('data-select-multiple-value')) {
  929.         if (option.getAttribute('selected') || option.selected) {
  930.           option.selected = false;
  931.           this.selectAll.querySelector('input').checked = false;
  932.         } else {
  933.           option.selected = true;
  934.         }
  935.       }
  936.     });
  938.     this.update();
  939.   }
  941.   /**
  942.    * Event callback to handle the click on the select all checkbox.
  943.    *
  944.    * @param {Event} e
  945.    * @fires Select#onSelectAll
  946.    * @type {function}
  947.    */
  948.   handleClickSelectAll(e) {
  949.     e.preventDefault();
  950.     // Early returns.
  951.     if (this.selectAll.querySelector('input').disabled) {
  952.       return;
  953.     }
  954.     const checked = Select.#checkCheckbox(e);
  955.     const options = Array.from(this.select.options).filter((o) => !o.disabled);
  956.     const checkboxes = Array.from(
  957.       this.searchContainer.querySelectorAll('[data-visible="true"]'),
  958.     ).filter((checkbox) => !checkbox.querySelector('input').disabled);
  960.     checkboxes.forEach((checkbox) => {
  961.       checkbox.querySelector('input').checked = checked;
  962.       const option = options.find(
  963.         (o) => o.text === checkbox.getAttribute('data-select-multiple-value'),
  964.       );
  966.       if (option) {
  967.         if (checked) {
  968.           option.selected = true;
  969.         } else {
  970.           option.selected = false;
  971.         }
  972.       }
  973.     });
  975.     this.update();
  976.     this.trigger('onSelectAll', { selected: options });
  977.   }
  979.   /**
  980.    * Event callback to handle moving the focus out of the select.
  981.    *
  982.    * @param {Event} e
  983.    * @type {function}
  984.    */
  985.   handleFocusout(e) {
  986.     if (
  987.       e.relatedTarget &&
  988.       this.selectMultiple &&
  989.       !this.selectMultiple.contains(e.relatedTarget) &&
  990.       this.searchContainer.style.display === 'block'
  991.     ) {
  992.       this.searchContainer.style.display = 'none';
  993.       this.input.classList.remove('ecl-select--active');
  994.       this.input.setAttribute('aria-expanded', false);
  995.     } else if (
  996.       e.relatedTarget &&
  997.       !this.selectMultiple &&
  998.       !this.select.parentNode.contains(e.relatedTarget)
  999.     ) {
  1000.       this.select.blur();
  1001.     }
  1002.   }
  1004.   /**
  1005.    * Event callback to handle the user typing in the search field.
  1006.    *
  1007.    * @param {Event} e
  1008.    * @fires Select#onSearch
  1009.    * @type {function}
  1010.    */
  1011.   handleSearch(e) {
  1012.     const dropDownHeight = this.optionsContainer.offsetHeight;
  1013.     this.visibleOptions = [];
  1014.     const keyword = e.target.value.toLowerCase();
  1015.     let eventDetails = {};
  1016.     if (dropDownHeight > 0) {
  1017.       this.optionsContainer.style.height = `${dropDownHeight}px`;
  1018.     }
  1019.     this.checkboxes.forEach((checkbox) => {
  1020.       if (
  1021.         !checkbox
  1022.           .getAttribute('data-select-multiple-value')
  1023.           .toLocaleLowerCase()
  1024.           .includes(keyword)
  1025.       ) {
  1026.         checkbox.removeAttribute('data-visible');
  1027.         checkbox.style.display = 'none';
  1028.       } else {
  1029.         checkbox.setAttribute('data-visible', true);
  1030.         checkbox.style.display = 'flex';
  1031.         // Highlight keyword in checkbox label.
  1032.         const checkboxLabelText = checkbox.querySelector(
  1033.           '.ecl-checkbox__label-text',
  1034.         );
  1035.         checkboxLabelText.textContent = checkboxLabelText.textContent.replace(
  1036.           '.cls-1{fill:none}',
  1037.           '',
  1038.         );
  1039.         if (keyword) {
  1040.           checkboxLabelText.innerHTML = checkboxLabelText.textContent.replace(
  1041.             new RegExp(`${keyword}(?!([^<]+)?<)`, 'gi'),
  1042.             '<b>$&</b>',
  1043.           );
  1044.         }
  1045.         this.visibleOptions.push(checkbox);
  1046.       }
  1047.     });
  1048.     // Select all checkbox follows along.
  1049.     const checked = this.visibleOptions.filter(
  1050.       (c) => c.querySelector('input').checked,
  1051.     );
  1052.     if (
  1053.       this.visibleOptions.length === 0 ||
  1054.       this.visibleOptions.length !== checked.length
  1055.     ) {
  1056.       this.selectAll.querySelector('input').checked = false;
  1057.     } else {
  1058.       this.selectAll.querySelector('input').checked = true;
  1059.     }
  1060.     // Display no-results message.
  1061.     const noResultsElement = this.searchContainer.querySelector(
  1062.       '.ecl-select__multiple-no-results',
  1063.     );
  1064.     const groups = this.optionsContainer.getElementsByClassName(
  1065.       'ecl-select__multiple-group',
  1066.     );
  1067.     // eslint-disable-next-line no-restricted-syntax
  1068.     for (const group of groups) {
  1069.       group.style.display = 'none';
  1070.       // eslint-disable-next-line no-restricted-syntax
  1071.       const groupedCheckboxes = [...group.children].filter((node) =>
  1072.         node.classList.contains('ecl-checkbox'),
  1073.       );
  1074.       groupedCheckboxes.forEach((single) => {
  1075.         if (single.hasAttribute('data-visible')) {
  1076.           single.closest('.ecl-select__multiple-group').style.display = 'block';
  1077.         }
  1078.       });
  1079.     }
  1081.     if (this.visibleOptions.length === 0 && !noResultsElement) {
  1082.       // Create no-results element.
  1083.       const noResultsContainer = document.createElement('div');
  1084.       const noResultsLabel = document.createElement('span');
  1085.       noResultsContainer.classList.add('ecl-select__multiple-no-results');
  1086.       noResultsLabel.innerHTML = this.textNoResults;
  1087.       noResultsContainer.appendChild(noResultsLabel);
  1088.       this.optionsContainer.appendChild(noResultsContainer);
  1089.     } else if (this.visibleOptions.length > 0 && noResultsElement !== null) {
  1090.       noResultsElement.parentNode.removeChild(noResultsElement);
  1091.     }
  1092.     // reset
  1093.     if (keyword.length === 0) {
  1094.       this.checkboxes.forEach((checkbox) => {
  1095.         checkbox.setAttribute('data-visible', true);
  1096.         checkbox.style.display = 'flex';
  1097.       });
  1098.       // Enable select all checkbox.
  1099.       this.selectAll.classList.remove('ecl-checkbox--disabled');
  1100.       this.selectAll.querySelector('input').disabled = false;
  1101.     } else {
  1102.       // Disable select all checkbox.
  1103.       this.selectAll.classList.add('ecl-checkbox--disabled');
  1104.       this.selectAll.querySelector('input').disabled = true;
  1105.     }
  1106.     if (this.visibleOptions.length > 0) {
  1107.       const visibleLabels = this.visibleOptions.map((option) => {
  1108.         let label = null;
  1109.         const labelEl = queryOne('.ecl-checkbox__label-text', option);
  1110.         if (labelEl) {
  1111.           label = labelEl.innerHTML.replace(/<\/?b>/g, '');
  1112.         }
  1113.         return label || '';
  1114.       });
  1115.       eventDetails = {
  1116.         results: visibleLabels,
  1117.         text: e.target.value.toLowerCase(),
  1118.       };
  1119.     } else {
  1120.       eventDetails = { results: 'none', text: e.target.value.toLowerCase() };
  1121.     }
  1122.     this.trigger('onSearch', eventDetails);
  1123.   }
  1125.   /**
  1126.    * Event callback to handle the click outside the select.
  1127.    *
  1128.    * @param {Event} e
  1129.    * @type {function}
  1130.    */
  1131.   handleClickOutside(e) {
  1132.     if (
  1133.       e.target &&
  1134.       this.selectMultiple &&
  1135.       !this.selectMultiple.contains(e.target) &&
  1136.       this.searchContainer.style.display === 'block'
  1137.     ) {
  1138.       this.searchContainer.style.display = 'none';
  1139.       this.input.classList.remove('ecl-select--active');
  1140.       this.input.setAttribute('aria-expanded', false);
  1141.     } else if (
  1142.       e.target &&
  1143.       !this.selectMultiple &&
  1144.       !this.select.parentNode.contains(e.target)
  1145.     ) {
  1146.       this.select.classList.remove('ecl-select--active');
  1147.     }
  1148.   }
  1150.   /**
  1151.    * Event callback to handle keyboard events on the select.
  1152.    *
  1153.    * @param {Event} e
  1154.    * @type {function}
  1155.    */
  1156.   handleKeyboardOnSelect(e) {
  1157.     switch (e.key) {
  1158.       case 'Escape':
  1159.         e.preventDefault();
  1160.         this.handleEsc(e);
  1161.         break;
  1163.       case ' ':
  1164.       case 'Enter':
  1165.         this.handleToggle(e);
  1166.         if (this.multiple) {
  1167.           e.preventDefault();
  1168.           this.search.focus();
  1169.         }
  1170.         break;
  1172.       case 'ArrowDown':
  1173.         if (this.multiple) {
  1174.           e.preventDefault();
  1175.           this.handleToggle(e);
  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');
  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;