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.       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.       }
  596.     } else {
  597.       this.shouldHandleClick = true;
  598.       this.select.addEventListener('keydown', this.handleKeyboardOnSelect);
  599.       this.select.addEventListener('blur', this.handleEsc);
  600.       this.select.addEventListener('click', this.handleToggle, true);
  601.       this.select.addEventListener('mousedown', this.handleToggle, true);
  602.     }
  604.     document.addEventListener('click', this.handleClickOutside);
  606.     // Set ecl initialized attribute
  607.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  608.     ECL.components.set(this.element, this);
  609.   }
  611.   /**
  612.    * Update instance.
  613.    *
  614.    * @param {Integer} i
  615.    */
  616.   update(i) {
  617.     this.#updateCurrentValue();
  618.     this.#updateSelectionsCount(i);
  619.   }
  621.   /**
  622.    * Set the selected value(s) programmatically.
  623.    *
  624.    * @param {string | Array<string>} values - A string or an array of values or labels to set as selected.
  625.    * @param {string} [op='replace'] - The operation mode. Use 'add' to keep the previous selections.
  626.    * @throws {Error} Throws an error if an invalid operation mode is provided.
  627.    *
  628.    * @example
  629.    * // Replace current selection with new values
  630.    * setCurrentValue(['value1', 'value2']);
  631.    *
  632.    * // Add to current selection without clearing previous selections
  633.    * setCurrentValue(['value3', 'value4'], 'add');
  634.    *
  635.    */
  636.   setCurrentValue(values, op = 'replace') {
  637.     if (op !== 'replace' && op !== 'add') {
  638.       throw new Error('Invalid operation mode. Use "replace" or "add".');
  639.     }
  641.     const valuesArray = typeof values === 'string' ? [values] : values;
  643.     Array.from(this.select.options).forEach((option) => {
  644.       if (op === 'replace') {
  645.         option.selected = false;
  646.       }
  647.       if (
  648.         valuesArray.includes(option.value) ||
  649.         valuesArray.includes(option.label)
  650.       ) {
  651.         option.selected = true;
  652.       }
  653.     });
  655.     this.update();
  656.   }
  658.   /**
  659.    * Event callback to show/hide the dropdown
  660.    *
  661.    * @param {Event} e
  662.    * @fires Select#onToggle
  663.    * @type {function}
  664.    */
  665.   handleToggle(e) {
  666.     if (this.multiple) {
  667.       e.preventDefault();
  668.       this.input.classList.toggle('ecl-select--active');
  669.       if (this.searchContainer.style.display === 'none') {
  670.         this.searchContainer.style.display = 'block';
  671.         this.input.setAttribute('aria-expanded', true);
  672.         this.isOpen = true;
  673.       } else {
  674.         this.searchContainer.style.display = 'none';
  675.         this.input.setAttribute('aria-expanded', false);
  676.         this.isOpen = false;
  677.       }
  678.     } else if (e.type === 'click' && !this.shouldHandleClick) {
  679.       this.shouldHandleClick = true;
  680.       this.select.classList.toggle('ecl-select--active');
  681.     } else if (e.type === 'mousedown' && this.shouldHandleClick) {
  682.       this.shouldHandleClick = false;
  683.       this.select.classList.toggle('ecl-select--active');
  684.     } else if (e.type === 'keydown') {
  685.       this.shouldHandleClick = false;
  686.       this.select.classList.toggle('ecl-select--active');
  687.     }
  689.     const eventData = { opened: this.isOpen, e };
  690.     this.trigger('onToggle', eventData);
  691.   }
  693.   /**
  694.    * Register a callback function for a specific event.
  695.    *
  696.    * @param {string} eventName - The name of the event to listen for.
  697.    * @param {Function} callback - The callback function to be invoked when the event occurs.
  698.    * @returns {void}
  699.    * @memberof Select
  700.    * @instance
  701.    *
  702.    * @example
  703.    * // Registering a callback for the 'onToggle' event
  704.    * select.on('onToggle', (event) => {
  705.    *   console.log('Toggle event occurred!', event);
  706.    * });
  707.    */
  708.   on(eventName, callback) {
  709.     this.eventManager.on(eventName, callback);
  710.   }
  712.   /**
  713.    * Trigger a component event.
  714.    *
  715.    * @param {string} eventName - The name of the event to trigger.
  716.    * @param {any} eventData - Data associated with the event.
  717.    * @memberof Select
  718.    * @instance
  719.    *
  720.    */
  721.   trigger(eventName, eventData) {
  722.     this.eventManager.trigger(eventName, eventData);
  723.   }
  725.   /**
  726.    * Destroy the component instance.
  727.    */
  728.   destroy() {
  729.     if (this.multiple) {
  730.       this.selectMultiple.removeEventListener('focusout', this.handleFocusout);
  731.       this.input.removeEventListener('keydown', this.handleKeyboardOnSelect);
  732.       this.input.removeEventListener('click', this.handleToggle);
  733.       this.search.removeEventListener('keyup', this.handleSearch);
  734.       this.search.removeEventListener('keydown', this.handleKeyboardOnSearch);
  735.       this.selectAll.removeEventListener('click', this.handleClickSelectAll);
  736.       this.selectAll.removeEventListener('keypress', this.handleClickSelectAll);
  737.       this.selectAll.removeEventListener(
  738.         'keydown',
  739.         this.handleKeyboardOnSelectAll,
  740.       );
  741.       this.optionsContainer.removeEventListener(
  742.         'keydown',
  743.         this.handleKeyboardOnOptions,
  744.       );
  745.       this.checkboxes.forEach((checkbox) => {
  746.         checkbox.removeEventListener('click', this.handleClickSelectAll);
  747.         checkbox.removeEventListener('click', this.handleClickOption);
  748.         checkbox.removeEventListener('keydown', this.handleKeyboardOnOption);
  749.       });
  750.       document.removeEventListener('click', this.handleClickOutside);
  751.       if (this.closeButton) {
  752.         this.closeButton.removeEventListener('click', this.handleEsc);
  753.         this.closeButton.removeEventListener(
  754.           'keydown',
  755.           this.handleKeyboardOnClose,
  756.         );
  757.       }
  758.       if (this.clearAllButton) {
  759.         this.clearAllButton.removeEventListener(
  760.           'click',
  761.           this.handleClickOnClearAll,
  762.         );
  763.         this.clearAllButton.removeEventListener(
  764.           'keydown',
  765.           this.handleKeyboardOnClearAll,
  766.         );
  767.       }
  768.       if (this.selectMultiple) {
  769.         this.selectMultiple.remove();
  770.       }
  772.       this.select.parentNode.classList.remove('ecl-select__container--hidden');
  773.     } else {
  774.       this.select.removeEventListener('focus', this.handleToggle);
  775.     }
  777.     this.select.removeEventListener('blur', this.handleToggle);
  778.     document.removeEventListener('click', this.handleClickOutside);
  780.     if (this.element) {
  781.       this.element.removeAttribute('data-ecl-auto-initialized');
  782.       ECL.components.delete(this.element);
  783.     }
  784.   }
  786.   /**
  787.    * Private method to handle the update of the selected options counter.
  788.    *
  789.    * @param {Integer} i
  790.    * @private
  791.    */
  792.   #updateSelectionsCount(i) {
  793.     let selectedOptionsCount = 0;
  795.     if (i > 0) {
  796.       this.selectionCount.querySelector('span').innerHTML += i;
  797.     } else {
  798.       selectedOptionsCount = Array.from(this.select.options).filter(
  799.         (option) => option.selected,
  800.       ).length;
  801.     }
  802.     if (selectedOptionsCount > 0) {
  803.       this.selectionCount.querySelector('span').innerHTML =
  804.         selectedOptionsCount;
  805.       this.selectionCount.classList.add(
  806.         'ecl-select-multiple-selections-counter--visible',
  807.       );
  808.       if (this.dropDownToolbar) {
  809.         this.dropDownToolbar.style.display = 'flex';
  810.       }
  811.     } else {
  812.       this.selectionCount.classList.remove(
  813.         'ecl-select-multiple-selections-counter--visible',
  814.       );
  815.       if (this.dropDownToolbar) {
  816.         this.dropDownToolbar.style.display = 'none';
  817.       }
  818.     }
  820.     if (selectedOptionsCount >= 100) {
  821.       this.selectionCount.classList.add(
  822.         'ecl-select-multiple-selections-counter--xxl',
  823.       );
  824.     }
  825.   }
  827.   /**
  828.    * Private method to update the select value.
  829.    *
  830.    * @fires Select#onSelection
  831.    * @private
  832.    */
  833.   #updateCurrentValue() {
  834.     const optionSelected = Array.from(this.select.options)
  835.       .filter((option) => option.selected) // do not rely on getAttribute as it does not work in all cases
  836.       .map((option) => option.text)
  837.       .join(', ');
  839.     this.input.innerHTML = optionSelected || this.textDefault || '';
  841.     if (optionSelected !== '' && this.label) {
  842.       this.label.setAttribute(
  843.         'aria-label',
  844.         `${this.label.innerText} ${optionSelected}`,
  845.       );
  846.     } else if (optionSelected === '' && this.label) {
  847.       this.label.removeAttribute('aria-label');
  848.     }
  850.     this.trigger('onSelection', { selected: optionSelected });
  851.     // Dispatch a change event once the value of the select has changed.
  852.     this.select.dispatchEvent(new window.Event('change', { bubbles: true }));
  853.   }
  855.   /**
  856.    * Private method to handle the focus switch.
  857.    *
  858.    * @param {upOrDown}
  859.    * @private
  860.    */
  861.   #moveFocus(upOrDown) {
  862.     const activeEl = document.activeElement;
  863.     const hasGroups = activeEl.parentElement.parentElement.classList.contains(
  864.       'ecl-select__multiple-group',
  865.     );
  866.     const options = !hasGroups
  867.       ? Array.from(
  868.           activeEl.parentElement.parentElement.querySelectorAll(
  869.             '.ecl-checkbox__input',
  870.           ),
  871.         )
  872.       : Array.from(
  873.           activeEl.parentElement.parentElement.parentElement.querySelectorAll(
  874.             '.ecl-checkbox__input',
  875.           ),
  876.         );
  877.     const activeIndex = options.indexOf(activeEl);
  878.     if (upOrDown === 'down') {
  879.       const nextSiblings = options
  880.         .splice(activeIndex + 1, options.length)
  881.         .filter(
  882.           (el) => !el.disabled && el.parentElement.style.display !== 'none',
  883.         );
  884.       if (nextSiblings.length > 0) {
  885.         nextSiblings[0].focus();
  886.       } else {
  887.         // eslint-disable-next-line no-lonely-if
  888.         if (
  889.           this.dropDownToolbar &&
  890.           this.dropDownToolbar.style.display === 'flex'
  891.         ) {
  892.           this.dropDownToolbar.firstChild.focus();
  893.         } else {
  894.           this.input.focus();
  895.         }
  896.       }
  897.     } else {
  898.       const previousSiblings = options
  899.         .splice(0, activeIndex)
  900.         .filter(
  901.           (el) => !el.disabled && el.parentElement.style.display !== 'none',
  902.         );
  903.       if (previousSiblings.length > 0) {
  904.         previousSiblings[previousSiblings.length - 1].focus();
  905.       } else {
  906.         this.optionsContainer.scrollTop = 0;
  907.         if (!this.selectAll.querySelector('input').disabled) {
  908.           this.selectAll.querySelector('input').focus();
  909.         } else {
  910.           this.search.focus();
  911.         }
  912.       }
  913.     }
  914.   }
  916.   /**
  917.    * Event callback to handle the click on a checkbox.
  918.    *
  919.    * @param {Event} e
  920.    * @type {function}
  921.    */
  922.   handleClickOption(e) {
  923.     e.preventDefault();
  924.     Select.#checkCheckbox(e);
  926.     // Toggle values
  927.     const checkbox = e.target.closest('.ecl-checkbox');
  928.     Array.from(this.select.options).forEach((option) => {
  929.       if (option.text === checkbox.getAttribute('data-select-multiple-value')) {
  930.         if (option.getAttribute('selected') || option.selected) {
  931.           option.selected = false;
  932.           this.selectAll.querySelector('input').checked = false;
  933.         } else {
  934.           option.selected = true;
  935.         }
  936.       }
  937.     });
  939.     this.update();
  940.   }
  942.   /**
  943.    * Event callback to handle the click on the select all checkbox.
  944.    *
  945.    * @param {Event} e
  946.    * @fires Select#onSelectAll
  947.    * @type {function}
  948.    */
  949.   handleClickSelectAll(e) {
  950.     e.preventDefault();
  951.     // Early returns.
  952.     if (this.selectAll.querySelector('input').disabled) {
  953.       return;
  954.     }
  955.     const checked = Select.#checkCheckbox(e);
  956.     const options = Array.from(this.select.options).filter((o) => !o.disabled);
  957.     const checkboxes = Array.from(
  958.       this.searchContainer.querySelectorAll('[data-visible="true"]'),
  959.     ).filter((checkbox) => !checkbox.querySelector('input').disabled);
  961.     checkboxes.forEach((checkbox) => {
  962.       checkbox.querySelector('input').checked = checked;
  963.       const option = options.find(
  964.         (o) => o.text === checkbox.getAttribute('data-select-multiple-value'),
  965.       );
  967.       if (option) {
  968.         if (checked) {
  969.           option.selected = true;
  970.         } else {
  971.           option.selected = false;
  972.         }
  973.       }
  974.     });
  976.     this.update();
  977.     this.trigger('onSelectAll', { selected: options });
  978.   }
  980.   /**
  981.    * Event callback to handle moving the focus out of the select.
  982.    *
  983.    * @param {Event} e
  984.    * @type {function}
  985.    */
  986.   handleFocusout(e) {
  987.     if (
  988.       e.relatedTarget &&
  989.       this.selectMultiple &&
  990.       !this.selectMultiple.contains(e.relatedTarget) &&
  991.       this.searchContainer.style.display === 'block'
  992.     ) {
  993.       this.searchContainer.style.display = 'none';
  994.       this.input.classList.remove('ecl-select--active');
  995.       this.input.setAttribute('aria-expanded', false);
  996.     } else if (
  997.       e.relatedTarget &&
  998.       !this.selectMultiple &&
  999.       !this.select.parentNode.contains(e.relatedTarget)
  1000.     ) {
  1001.       this.select.blur();
  1002.     }
  1003.   }
  1005.   /**
  1006.    * Event callback to handle the user typing in the search field.
  1007.    *
  1008.    * @param {Event} e
  1009.    * @fires Select#onSearch
  1010.    * @type {function}
  1011.    */
  1012.   handleSearch(e) {
  1013.     const dropDownHeight = this.optionsContainer.offsetHeight;
  1014.     this.visibleOptions = [];
  1015.     const keyword = e.target.value.toLowerCase();
  1016.     let eventDetails = {};
  1017.     if (dropDownHeight > 0) {
  1018.       this.optionsContainer.style.height = `${dropDownHeight}px`;
  1019.     }
  1020.     this.checkboxes.forEach((checkbox) => {
  1021.       if (
  1022.         !checkbox
  1023.           .getAttribute('data-select-multiple-value')
  1024.           .toLocaleLowerCase()
  1025.           .includes(keyword)
  1026.       ) {
  1027.         checkbox.removeAttribute('data-visible');
  1028.         checkbox.style.display = 'none';
  1029.       } else {
  1030.         checkbox.setAttribute('data-visible', true);
  1031.         checkbox.style.display = 'flex';
  1032.         // Highlight keyword in checkbox label.
  1033.         const checkboxLabelText = checkbox.querySelector(
  1034.           '.ecl-checkbox__label-text',
  1035.         );
  1036.         checkboxLabelText.textContent = checkboxLabelText.textContent.replace(
  1037.           '.cls-1{fill:none}',
  1038.           '',
  1039.         );
  1040.         if (keyword) {
  1041.           checkboxLabelText.innerHTML = checkboxLabelText.textContent.replace(
  1042.             new RegExp(`${keyword}(?!([^<]+)?<)`, 'gi'),
  1043.             '<b>$&</b>',
  1044.           );
  1045.         }
  1046.         this.visibleOptions.push(checkbox);
  1047.       }
  1048.     });
  1049.     // Select all checkbox follows along.
  1050.     const checked = this.visibleOptions.filter(
  1051.       (c) => c.querySelector('input').checked,
  1052.     );
  1053.     if (
  1054.       this.visibleOptions.length === 0 ||
  1055.       this.visibleOptions.length !== checked.length
  1056.     ) {
  1057.       this.selectAll.querySelector('input').checked = false;
  1058.     } else {
  1059.       this.selectAll.querySelector('input').checked = true;
  1060.     }
  1061.     // Display no-results message.
  1062.     const noResultsElement = this.searchContainer.querySelector(
  1063.       '.ecl-select__multiple-no-results',
  1064.     );
  1065.     const groups = this.optionsContainer.getElementsByClassName(
  1066.       'ecl-select__multiple-group',
  1067.     );
  1068.     // eslint-disable-next-line no-restricted-syntax
  1069.     for (const group of groups) {
  1070.       group.style.display = 'none';
  1071.       // eslint-disable-next-line no-restricted-syntax
  1072.       const groupedCheckboxes = [...group.children].filter((node) =>
  1073.         node.classList.contains('ecl-checkbox'),
  1074.       );
  1075.       groupedCheckboxes.forEach((single) => {
  1076.         if (single.hasAttribute('data-visible')) {
  1077.           single.closest('.ecl-select__multiple-group').style.display = 'block';
  1078.         }
  1079.       });
  1080.     }
  1082.     if (this.visibleOptions.length === 0 && !noResultsElement) {
  1083.       // Create no-results element.
  1084.       const noResultsContainer = document.createElement('div');
  1085.       const noResultsLabel = document.createElement('span');
  1086.       noResultsContainer.classList.add('ecl-select__multiple-no-results');
  1087.       noResultsLabel.innerHTML = this.textNoResults;
  1088.       noResultsContainer.appendChild(noResultsLabel);
  1089.       this.optionsContainer.appendChild(noResultsContainer);
  1090.     } else if (this.visibleOptions.length > 0 && noResultsElement !== null) {
  1091.       noResultsElement.parentNode.removeChild(noResultsElement);
  1092.     }
  1093.     // reset
  1094.     if (keyword.length === 0) {
  1095.       this.checkboxes.forEach((checkbox) => {
  1096.         checkbox.setAttribute('data-visible', true);
  1097.         checkbox.style.display = 'flex';
  1098.       });
  1099.       // Enable select all checkbox.
  1100.       this.selectAll.classList.remove('ecl-checkbox--disabled');
  1101.       this.selectAll.querySelector('input').disabled = false;
  1102.     } else {
  1103.       // Disable select all checkbox.
  1104.       this.selectAll.classList.add('ecl-checkbox--disabled');
  1105.       this.selectAll.querySelector('input').disabled = true;
  1106.     }
  1107.     if (this.visibleOptions.length > 0) {
  1108.       const visibleLabels = this.visibleOptions.map((option) => {
  1109.         let label = null;
  1110.         const labelEl = queryOne('.ecl-checkbox__label-text', option);
  1111.         if (labelEl) {
  1112.           label = labelEl.innerHTML.replace(/<\/?b>/g, '');
  1113.         }
  1114.         return label || '';
  1115.       });
  1116.       eventDetails = {
  1117.         results: visibleLabels,
  1118.         text: e.target.value.toLowerCase(),
  1119.       };
  1120.     } else {
  1121.       eventDetails = { results: 'none', text: e.target.value.toLowerCase() };
  1122.     }
  1123.     this.trigger('onSearch', eventDetails);
  1124.   }
  1126.   /**
  1127.    * Event callback to handle the click outside the select.
  1128.    *
  1129.    * @param {Event} e
  1130.    * @type {function}
  1131.    */
  1132.   handleClickOutside(e) {
  1133.     if (
  1134.       e.target &&
  1135.       this.selectMultiple &&
  1136.       !this.selectMultiple.contains(e.target) &&
  1137.       this.searchContainer.style.display === 'block'
  1138.     ) {
  1139.       this.searchContainer.style.display = 'none';
  1140.       this.input.classList.remove('ecl-select--active');
  1141.       this.input.setAttribute('aria-expanded', false);
  1142.     } else if (
  1143.       e.target &&
  1144.       !this.selectMultiple &&
  1145.       !this.select.parentNode.contains(e.target)
  1146.     ) {
  1147.       this.select.classList.remove('ecl-select--active');
  1148.     }
  1149.   }
  1151.   /**
  1152.    * Event callback to handle keyboard events on the select.
  1153.    *
  1154.    * @param {Event} e
  1155.    * @type {function}
  1156.    */
  1157.   handleKeyboardOnSelect(e) {
  1158.     switch (e.key) {
  1159.       case 'Escape':
  1160.         e.preventDefault();
  1161.         this.handleEsc(e);
  1162.         break;
  1164.       case ' ':
  1165.       case 'Enter':
  1166.         this.handleToggle(e);
  1167.         if (this.multiple) {
  1168.           e.preventDefault();
  1169.           this.search.focus();
  1170.         }
  1171.         break;
  1173.       case 'ArrowDown':
  1174.         if (this.multiple) {
  1175.           e.preventDefault();
  1176.           this.handleToggle(e);
  1177.         }
  1178.         break;
  1180.       default:
  1181.     }
  1182.   }
  1184.   /**
  1185.    * Event callback to handle keyboard events on the select all checkbox.
  1186.    *
  1187.    * @param {Event} e
  1188.    * @type {function}
  1189.    */
  1190.   handleKeyboardOnSelectAll(e) {
  1191.     switch (e.key) {
  1192.       case 'Escape':
  1193.         e.preventDefault();
  1194.         this.handleEsc(e);
  1195.         break;
  1197.       case 'ArrowDown':
  1198.         e.preventDefault();
  1199.         if (this.visibleOptions.length > 0) {
  1200.           this.visibleOptions[0].querySelector('input').focus();
  1201.         } else {
  1202.           this.input.focus();
  1203.         }
  1204.         break;
  1206.       case 'ArrowUp':
  1207.         e.preventDefault();
  1208.         this.search.focus();
  1209.         break;
  1211.       case 'Tab':
  1212.         e.preventDefault();
  1213.         if (e.shiftKey) {
  1214.           this.search.focus();
  1215.         } else if (this.visibleOptions.length > 0) {
  1216.           this.visibleOptions[0].querySelector('input').focus();
  1217.         } else {
  1218.           this.input.focus();
  1219.         }
  1220.         break;
  1222.       default:
  1223.     }
  1224.   }
  1226.   /**
  1227.    * Event callback to handle keyboard events on the dropdown.
  1228.    *
  1229.    * @param {Event} e
  1230.    * @type {function}
  1231.    */
  1232.   handleKeyboardOnOptions(e) {
  1233.     switch (e.key) {
  1234.       case 'Escape':
  1235.         e.preventDefault();
  1236.         this.handleEsc(e);
  1237.         break;
  1239.       case 'ArrowDown':
  1240.         e.preventDefault();
  1241.         this.#moveFocus('down');
  1242.         break;
  1244.       case 'ArrowUp':
  1245.         e.preventDefault();
  1246.         this.#moveFocus('up');
  1247.         break;
  1249.       case 'Tab':
  1250.         e.preventDefault();
  1251.         if (e.shiftKey) {
  1252.           this.#moveFocus('up');
  1253.         } else {
  1254.           this.#moveFocus('down');
  1255.         }
  1256.         break;
  1258.       default:
  1259.     }
  1260.   }
  1262.   /**
  1263.    * Event callback to handle keyboard events
  1264.    *
  1265.    * @param {Event} e
  1266.    * @type {function}
  1267.    */
  1268.   handleKeyboardOnSearch(e) {
  1269.     switch (e.key) {
  1270.       case 'Escape':
  1271.         e.preventDefault();
  1272.         this.handleEsc(e);
  1273.         break;
  1275.       case 'ArrowDown':
  1276.         e.preventDefault();
  1277.         if (this.selectAll.querySelector('input').disabled) {
  1278.           if (this.visibleOptions.length > 0) {
  1279.             this.visibleOptions[0].querySelector('input').focus();
  1280.           } else {
  1281.             this.input.focus();
  1282.           }
  1283.         } else {
  1284.           this.selectAll.querySelector('input').focus();
  1285.         }
  1286.         break;
  1288.       case 'ArrowUp':
  1289.         e.preventDefault();
  1290.         this.input.focus();
  1291.         this.handleToggle(e);
  1292.         break;
  1294.       default:
  1295.     }
  1296.   }
  1298.   /**
  1299.    * Event callback to handle the click on an option.
  1300.    *
  1301.    * @param {Event} e
  1302.    * @type {function}
  1303.    */
  1304.   handleKeyboardOnOption(e) {
  1305.     if (e.key === 'Enter' || e.key === ' ') {
  1306.       e.preventDefault();
  1307.       this.handleClickOption(e);
  1308.     }
  1309.   }
  1311.   /**
  1312.    * Event callback to handle keyboard events on the clear all button.
  1313.    *
  1314.    * @param {Event} e
  1315.    * @fires Select#onReset
  1316.    * @type {function}
  1317.    */
  1318.   handleKeyboardOnClearAll(e) {
  1319.     e.preventDefault();
  1321.     switch (e.key) {
  1322.       case 'Enter':
  1323.       case ' ':
  1324.         this.handleClickOnClearAll(e);
  1325.         this.trigger('onReset', e);
  1326.         this.input.focus();
  1327.         break;
  1329.       case 'ArrowDown':
  1330.         this.input.focus();
  1331.         break;
  1333.       case 'ArrowUp':
  1334.         if (this.closeButton) {
  1335.           this.closeButton.focus();
  1336.         } else {
  1337.           // eslint-disable-next-line no-lonely-if
  1338.           if (this.visibleOptions.length > 0) {
  1339.             this.visibleOptions[this.visibleOptions.length - 1]
  1340.               .querySelector('input')
  1341.               .focus();
  1342.           } else {
  1343.             this.search.focus();
  1344.           }
  1345.         }
  1346.         break;
  1348.       case 'Tab':
  1349.         if (e.shiftKey) {
  1350.           if (this.closeButton) {
  1351.             this.closeButton.focus();
  1352.           } else {
  1353.             // eslint-disable-next-line no-lonely-if
  1354.             if (this.visibleOptions.length > 0) {
  1355.               this.visibleOptions[this.visibleOptions.length - 1]
  1356.                 .querySelector('input')
  1357.                 .focus();
  1358.             } else {
  1359.               this.search.focus();
  1360.             }
  1361.           }
  1362.         } else {
  1363.           this.input.focus();
  1364.           this.handleToggle(e);
  1365.         }
  1366.         break;
  1368.       default:
  1369.     }
  1370.   }
  1372.   /**
  1373.    * Event callback for handling keyboard events in the close button.
  1374.    *
  1375.    * @param {Event} e
  1376.    * @type {function}
  1377.    */
  1378.   handleKeyboardOnClose(e) {
  1379.     e.preventDefault();
  1381.     switch (e.key) {
  1382.       case 'Enter':
  1383.       case ' ':
  1384.         this.handleEsc(e);
  1385.         this.input.focus();
  1386.         break;
  1388.       case 'ArrowUp':
  1389.         if (this.visibleOptions.length > 0) {
  1390.           this.visibleOptions[this.visibleOptions.length - 1]
  1391.             .querySelector('input')
  1392.             .focus();
  1393.         } else {
  1394.           this.input.focus();
  1395.           this.handleToggle(e);
  1396.         }
  1397.         break;
  1399.       case 'ArrowDown':
  1400.         if (this.clearAllButton) {
  1401.           this.clearAllButton.focus();
  1402.         } else {
  1403.           this.input.focus();
  1404.           this.handleToggle(e);
  1405.         }
  1406.         break;
  1408.       case 'Tab':
  1409.         if (!e.shiftKey) {
  1410.           if (this.clearAllButton) {
  1411.             this.clearAllButton.focus();
  1412.           } else {
  1413.             this.input.focus();
  1414.             this.handleToggle(e);
  1415.           }
  1416.         } else {
  1417.           // eslint-disable-next-line no-lonely-if
  1418.           if (this.visibleOptions.length > 0) {
  1419.             this.visibleOptions[this.visibleOptions.length - 1]
  1420.               .querySelector('input')
  1421.               .focus();
  1422.           } else {
  1423.             this.input.focus();
  1424.             this.handleToggle(e);
  1425.           }
  1426.         }
  1427.         break;
  1429.       default:
  1430.     }
  1431.   }
  1433.   /**
  1434.    * Event callback to handle different events which will close the dropdown.
  1435.    *
  1436.    * @param {Event} e
  1437.    * @type {function}
  1438.    */
  1439.   handleEsc(e) {
  1440.     if (this.multiple) {
  1441.       e.preventDefault();
  1442.       this.searchContainer.style.display = 'none';
  1443.       this.input.setAttribute('aria-expanded', false);
  1444.       this.input.blur();
  1445.       this.input.classList.remove('ecl-select--active');
  1446.     } else {
  1447.       this.select.classList.remove('ecl-select--active');
  1448.     }
  1449.   }
  1451.   /**
  1452.    * Event callback to handle the click on the clear all button.
  1453.    *
  1454.    * @param {Event} e
  1455.    * @fires Select#onReset
  1456.    * @type {function}
  1457.    */
  1458.   handleClickOnClearAll(e) {
  1459.     e.preventDefault();
  1460.     Array.from(this.select.options).forEach((option) => {
  1461.       const checkbox = this.selectMultiple.querySelector(
  1462.         `[data-select-multiple-value="${option.text}"]`,
  1463.       );
  1464.       const input = checkbox.querySelector('.ecl-checkbox__input');
  1465.       input.checked = false;
  1466.       option.selected = false;
  1467.     });
  1469.     this.selectAll.querySelector('.ecl-checkbox__input').checked = false;
  1470.     this.update(0);
  1471.     this.trigger('onReset', e);
  1472.   }
  1474.   /**
  1475.    * Event callback to reset the multiple select on form reset.
  1476.    *
  1477.    * @type {function}
  1478.    */
  1479.   resetForm() {
  1480.     if (this.multiple) {
  1481.       // A slight timeout is necessary to execute the function just after the original reset of the form.
  1482.       setTimeout(() => {
  1483.         Array.from(this.select.options).forEach((option) => {
  1484.           const checkbox = this.selectMultiple.querySelector(
  1485.             `[data-select-multiple-value="${option.text}"]`,
  1486.           );
  1487.           const input = checkbox.querySelector('.ecl-checkbox__input');
  1488.           if (input.checked) {
  1489.             option.selected = true;
  1490.           } else {
  1491.             option.selected = false;
  1492.           }
  1493.         });
  1494.         this.update(0);
  1495.       }, 10);
  1496.     }
  1497.   }
  1498. }
  1500. export default Select;