chuijs 4.0.2 → 4.0.4

package/framework/components/chui_inputs/chui_multi_combo_box/multi_combo_box.js

@@ -1,98 +1,110 @@
-const { Animation } = require('../../../modules/chui_animations/animations');
-const { dropdownPlacement } = require('../../../modules/chui_functions');
-const { Icon, Icons } = require('../../chui_icons/icons');
-const {ComboboxKeyboard} = require('../../../modules/chui_a11y/chui_a11y');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../../modules/chui_animations/animations");
+const { dropdownPlacement } = require("../../../modules/chui_functions");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { ComboboxKeyboard } = require("../../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 const OPTION_ROW_HEIGHT = 33;
 
 class MultiComboBox {
     #id = require("randomstring").generate();
-    #id_cb = require("randomstring").generate();
-    #MultiComboBox_main = document.createElement('chui_multicombobox');
-    #MultiComboBox_second = document.createElement('multicombobox');
-    #MultiComboBox_options = document.createElement('multicombobox_options');
-    #label = document.createElement('label');
-    #input = document.createElement('input');
-    #button_open = document.createElement('multicombo_button_open');
-    #button_open_disabled = document.createElement('multicombo_button_open');
-    #dropdown = document.createElement('multicombobox_dropdown');
-    #more = document.createElement('multicombobox_option_added_more');
-    #overflow_frame = undefined;
-    #overflow_observer = undefined;
+    #idCb = require("randomstring").generate();
+    #MultiComboBoxMain = document.createElement("chui_multicombobox");
+    #MultiComboBoxSecond = document.createElement("multicombobox");
+    #MultiComboBoxOptions = document.createElement("multicombobox_options");
+    #label = document.createElement("label");
+    #input = document.createElement("input");
+    #buttonOpen = document.createElement("multicombo_button_open");
+    #buttonOpenDisabled = document.createElement("multicombo_button_open");
+    #dropdown = document.createElement("multicombobox_dropdown");
+    #more = document.createElement("multicombobox_option_added_more");
+    #overflowFrame = undefined;
+    #overflowObserver = undefined;
     #a11y = undefined;
     // Слушатель окна храним полем, чтобы можно было снять в destroy()
-    #window_click_event = (event) => {
-        if (!this.#MultiComboBox_second.contains(event.target)) this.#closeDropdown();
+    #windowClickEvent = (event) => {
+        if (!this.#MultiComboBoxSecond.contains(event.target)) this.#closeDropdown();
     };
-    #dropdown_height = "max-content";
-    #value = []
-    constructor(options = {
-        name: String(),
-        title: String(),
-        placeholder: String(),
-        width: String(),
-        required: Boolean(),
-        optionsLen: String(),
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_MultiComboBox');
+    #dropdownHeight = "max-content";
+    #value = [];
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            required: Boolean(),
+            optionsLen: String(),
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_MultiComboBox");
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#MultiComboBox_main.style.width = options.width;
+        if (options.width !== undefined) this.#MultiComboBoxMain.style.width = options.width;
         if (options.title !== undefined) {
-            this.#label.classList.add('multicombobox_label')
+            this.#label.classList.add("multicombobox_label");
             this.#label.innerText = options.title;
-            this.#label.setAttribute('for', this.#id_cb);
-            this.#MultiComboBox_main.appendChild(this.#label);
+            this.#label.setAttribute("for", this.#idCb);
+            this.#MultiComboBoxMain.appendChild(this.#label);
         }
         if (options.optionsLen !== undefined) {
-            this.#dropdown_height = (OPTION_ROW_HEIGHT * options.optionsLen) + "px";
+            this.#dropdownHeight = OPTION_ROW_HEIGHT * options.optionsLen + "px";
         }
-        this.#dropdown.style.height = this.#dropdown_height;
+        this.#dropdown.style.height = this.#dropdownHeight;
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.required !== undefined) this.#input.required = options.required;
-        this.#input.setAttribute('id', this.#id_cb);
-        this.#input.classList.add('multicombobox_input');
-        this.#input.type = 'text';
+        this.#input.setAttribute("id", this.#idCb);
+        this.#input.classList.add("multicombobox_input");
+        this.#input.type = "text";
         // Рамку и подпись активного поля держит общее правило темы (`multicombobox:focus-within`
         // в global_style.css): индайновые состояние и цвет подписи перебивали тему
         // и расходились с остальными полями
-        this.#button_open.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--blue_prime_background)").getHTML();
-        this.#button_open_disabled.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--text_color_disabled)").getHTML();
+        this.#buttonOpen.innerHTML = new Icon(
+            Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
+            undefined,
+            "var(--blue_prime_background)"
+        ).getHTML();
+        this.#buttonOpenDisabled.innerHTML = new Icon(
+            Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
+            undefined,
+            "var(--text_color_disabled)"
+        ).getHTML();
         // Курсор выключенного поля даёт `.multicombobox_disabled`: `cursor` наследуется
-        this.#dropdown.setAttribute('id', this.#id);
-        this.#MultiComboBox_second.appendChild(this.#MultiComboBox_options)
-        this.#MultiComboBox_options.appendChild(this.#input)
+        this.#dropdown.setAttribute("id", this.#id);
+        this.#MultiComboBoxSecond.appendChild(this.#MultiComboBoxOptions);
+        this.#MultiComboBoxOptions.appendChild(this.#input);
         // Счётчик выбранных значений, не поместившихся в строку: поле держит одну линию
         // (--control_height) и не растёт от выбора (`#syncOverflow`)
         this.#more.hidden = true;
         this.#more.setAttribute("role", "img");
-        this.#MultiComboBox_options.appendChild(this.#more)
+        this.#MultiComboBoxOptions.appendChild(this.#more);
         // Ширину строки задаёт вёрстка вокруг: о смене размера сообщает наблюдатель
         if (typeof ResizeObserver === "function") {
-            this.#overflow_observer = new ResizeObserver(() => this.#scheduleOverflow());
-            this.#overflow_observer.observe(this.#MultiComboBox_options);
+            this.#overflowObserver = new ResizeObserver(() => this.#scheduleOverflow());
+            this.#overflowObserver.observe(this.#MultiComboBoxOptions);
         }
-        this.#MultiComboBox_second.appendChild(this.#button_open)
-        this.#MultiComboBox_second.appendChild(this.#dropdown)
+        this.#MultiComboBoxSecond.appendChild(this.#buttonOpen);
+        this.#MultiComboBoxSecond.appendChild(this.#dropdown);
         //LISTENERS
-        this.#input.addEventListener('focus', () => {
-            this.#button_open.style.transform = 'rotate(180deg)'
-            this.#dropdown.style.height = this.#dropdown_height
-        })
-        this.#input.addEventListener('blur', () => {
-            this.#button_open.style.transform = 'rotate(0deg)'
-            this.#dropdown.style.height = this.#dropdown_height
-        })
-        this.#MultiComboBox_second.addEventListener('click', (event) => {
+        this.#input.addEventListener("focus", () => {
+            this.#buttonOpen.style.transform = "rotate(180deg)";
+            this.#dropdown.style.height = this.#dropdownHeight;
+        });
+        this.#input.addEventListener("blur", () => {
+            this.#buttonOpen.style.transform = "rotate(0deg)";
+            this.#dropdown.style.height = this.#dropdownHeight;
+        });
+        this.#MultiComboBoxSecond.addEventListener("click", (event) => {
             if (!this.#input.disabled) {
-                if (event.target.closest('multicombobox_dropdown') === null &&
-                    event.target.closest('multicombobox_option_added_main') === null) {
-                    this.#input.focus()
-                    this.#openDropdown()
+                if (
+                    event.target.closest("multicombobox_dropdown") === null &&
+                    event.target.closest("multicombobox_option_added_main") === null
+                ) {
+                    this.#input.focus();
+                    this.#openDropdown();
                 }
             }
         });
-        this.#MultiComboBox_main.appendChild(this.#MultiComboBox_second)
+        this.#MultiComboBoxMain.appendChild(this.#MultiComboBoxSecond);
         // Клавиатура и aria: фокус в поле, стрелки по опциям, Enter переключает чекбокс, Escape закрывает.
         // `selectionState` отделяет выбор от наведения: `aria-selected` читается с чекбокса.
         this.#a11y = new ComboboxKeyboard(this.#input, {
@@ -103,257 +115,271 @@ class MultiComboBox {
                 return box !== null && box.checked === true;
             },
             onEscape: () => this.#closeDropdown(),
-            onOpen: () => this.#openDropdown()
+            onOpen: () => this.#openDropdown(),
         });
         // Список допускает несколько выбранных пунктов
         this.#dropdown.setAttribute("aria-multiselectable", "true");
     }
     #openDropdown() {
-        new Animation(this.#dropdown).fadeIn();
+        new Animation(this.#dropdown).panelIn();
         setOptionDisplay(this.#dropdown);
         this.#setDropdownDirection();
         // Список раскрывают на видимом поле — подходящий момент пересчитать счётчик «+N»
         this.#scheduleOverflow();
         this.#a11y.setExpanded(true);
         // Слушатель окна нужен только пока список открыт: закрытие по клику снаружи
-        window.addEventListener('click', this.#window_click_event);
+        window.addEventListener("click", this.#windowClickEvent);
     }
     #closeDropdown() {
         new Animation(this.#dropdown).fadeOut();
         if (this.#a11y !== undefined) this.#a11y.setExpanded(false);
-        window.removeEventListener('click', this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
     }
-    /** Полное удаление: снять слушатели окна и клавиатурный слой */
+    /** Полное удаление: снять слушатели окна, наблюдатель за строкой и клавиатурный слой */
     destroy() {
-        window.removeEventListener('click', this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
+        // Наблюдатель за шириной строки и отложенный кадр живут дольше узла, если их не снять:
+        // `ResizeObserver` держит цель, а пересчёт «+N» продолжил бы считать скрытые метки
+        if (this.#overflowObserver !== undefined) {
+            this.#overflowObserver.disconnect();
+            this.#overflowObserver = undefined;
+        }
+        if (this.#overflowFrame !== undefined) {
+            cancelAnimationFrame(this.#overflowFrame);
+            this.#overflowFrame = undefined;
+        }
         this.#a11y.destroy();
         this.#closeDropdown();
     }
     addValueChangeListener(listener = () => {}) {
-        this.#MultiComboBox_main.addEventListener("chui_multi_combo_option_changed", listener)
+        this.#MultiComboBoxMain.addEventListener("chui_multi_combo_option_changed", listener);
     }
     clearDropdown() {
         this.#dropdown.innerHTML = "";
     }
     addOptionsWithSections(options = []) {
-        for (let sect of options) {
+        for (const sect of options) {
             const section = document.createElement(`section`);
-            const section_title = document.createElement("label")
-            section.className = "multi_combobox_section"
-            section_title.className = "multi_combobox_section_title"
-            section_title.innerText = sect.title;
-            section.appendChild(section_title)
+            const sectionTitle = document.createElement("label");
+            section.className = "multi_combobox_section";
+            sectionTitle.className = "multi_combobox_section_title";
+            sectionTitle.innerText = sect.title;
+            section.appendChild(sectionTitle);
 
-            for (let opt of sect.options) {
-                const id_name = require("randomstring").generate();
+            for (const opt of sect.options) {
+                const identifier = require("randomstring").generate();
                 const option = document.createElement(`label`);
-                option.className = "multi_combobox_option"
-                option.setAttribute("option_title", opt.title)
-                const checkbox_input_check = document.createElement("input_check");
-                checkbox_input_check.className = "checkmark"
-                const checkbox_input_label = document.createElement("input_text");
-                checkbox_input_label.className = "option_input_label"
-                checkbox_input_label.innerText = opt.title;
-                const checkbox_input = document.createElement("input");
-                checkbox_input.className = "option_input"
-                checkbox_input.type = "checkbox"
-                checkbox_input.id = id_name;
-                checkbox_input.name = id_name;
+                option.className = "multi_combobox_option";
+                option.setAttribute("option_title", opt.title);
+                const checkboxInputCheck = document.createElement("input_check");
+                checkboxInputCheck.className = "checkmark";
+                const checkboxInputLabel = document.createElement("input_text");
+                checkboxInputLabel.className = "option_input_label";
+                checkboxInputLabel.innerText = opt.title;
+                const checkboxInput = document.createElement("input");
+                checkboxInput.className = "option_input";
+                checkboxInput.type = "checkbox";
+                checkboxInput.id = identifier;
+                checkboxInput.name = identifier;
                 //
-                option.appendChild(checkbox_input)
-                option.appendChild(checkbox_input_check)
-                option.appendChild(checkbox_input_label)
-                section.appendChild(option)
+                option.appendChild(checkboxInput);
+                option.appendChild(checkboxInputCheck);
+                option.appendChild(checkboxInputLabel);
+                section.appendChild(option);
                 //
-                checkbox_input.addEventListener("change", (evt) => {
-                    this.#input.value = ""
+                checkboxInput.addEventListener("change", (evt) => {
+                    this.#input.value = "";
                     // Выбор пункта — то же, что `aria-selected` у опции (см. `selectionState`)
-                    option.setAttribute("aria-selected", evt.target.checked ? "true" : "false")
+                    option.setAttribute("aria-selected", evt.target.checked ? "true" : "false");
                     if (evt.target.checked) {
-                        const test_main = document.createElement("multicombobox_option_added_main")
+                        const optionChip = document.createElement("multicombobox_option_added_main");
                         // Метка и чекбокс — два узла: id у каждого свой, иначе в документе два одинаковых id
-                        test_main.id = id_name + "_chip"
-                        const test_body = document.createElement("multicombobox_option_added_body")
-                        test_body.innerText = sect.title + ": " + opt.title;
-                        test_body.title = sect.title + ": " + opt.title;
-                        const test_remove = document.createElement("multicombobox_option_added_remove")
-                        test_remove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "12px").getHTML()
-                        test_remove.addEventListener("click", () => checkbox_input.click())
-                        test_main.appendChild(test_body)
-                        test_main.appendChild(test_remove)
-                        this.#MultiComboBox_options.insertBefore(test_main, this.#input)
+                        optionChip.id = identifier + "_chip";
+                        const optionChipBody = document.createElement("multicombobox_option_added_body");
+                        optionChipBody.innerText = sect.title + ": " + opt.title;
+                        optionChipBody.title = sect.title + ": " + opt.title;
+                        const optionChipRemove = document.createElement("multicombobox_option_added_remove");
+                        optionChipRemove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "12px").getHTML();
+                        optionChipRemove.addEventListener("click", () => checkboxInput.click());
+                        optionChip.appendChild(optionChipBody);
+                        optionChip.appendChild(optionChipRemove);
+                        this.#MultiComboBoxOptions.insertBefore(optionChip, this.#input);
                         this.#value.push({
-                            id: id_name,
+                            id: identifier,
                             section: sect.title,
-                            option: opt
-                        })
+                            option: opt,
+                        });
                         // Новая метка могла не влезть в строку — пересчёт счётчика «+N»
                         this.#scheduleOverflow();
                     } else {
-                        this.#removeOptionById(id_name)
+                        this.#removeOptionById(identifier);
                     }
                     //
                     const eventAwesome = new CustomEvent("chui_multi_combo_option_changed", {
                         detail: {
-                            values: this.#value
+                            values: this.#value,
                         },
                     });
-                    this.#MultiComboBox_main.dispatchEvent(eventAwesome)
-                })
+                    this.#MultiComboBoxMain.dispatchEvent(eventAwesome);
+                });
             }
             this.#dropdown.appendChild(section);
         }
-        this.#input.removeEventListener('input', this.#filter_options_event);
-        this.#input.addEventListener('input', this.#filter_sections_event);
+        this.#input.removeEventListener("input", this.#filterOptionsEvent);
+        this.#input.addEventListener("input", this.#filterSectionsEvent);
     }
     addOptions(...options) {
-        for (let opt of options) {
+        for (const opt of options) {
             // Свой id на каждый вариант: одинаковые подписи больше не дают дубликатов id в документе
-            const id_name = require("randomstring").generate();
+            const identifier = require("randomstring").generate();
             const option = document.createElement(`label`);
-            option.className = "multi_combobox_option"
-            option.setAttribute("option_title", opt.title)
-            const checkbox_input_check = document.createElement("input_check");
-            checkbox_input_check.className = "checkmark"
-            const checkbox_input_label = document.createElement("input_text");
-            checkbox_input_label.className = "option_input_label"
-            checkbox_input_label.innerText = opt.title;
-            const checkbox_input = document.createElement("input");
-            checkbox_input.className = "option_input"
-            checkbox_input.type = "checkbox"
-            checkbox_input.id = id_name;
-            checkbox_input.name = id_name;
+            option.className = "multi_combobox_option";
+            option.setAttribute("option_title", opt.title);
+            const checkboxInputCheck = document.createElement("input_check");
+            checkboxInputCheck.className = "checkmark";
+            const checkboxInputLabel = document.createElement("input_text");
+            checkboxInputLabel.className = "option_input_label";
+            checkboxInputLabel.innerText = opt.title;
+            const checkboxInput = document.createElement("input");
+            checkboxInput.className = "option_input";
+            checkboxInput.type = "checkbox";
+            checkboxInput.id = identifier;
+            checkboxInput.name = identifier;
             //
-            option.appendChild(checkbox_input)
-            option.appendChild(checkbox_input_check)
-            option.appendChild(checkbox_input_label)
+            option.appendChild(checkboxInput);
+            option.appendChild(checkboxInputCheck);
+            option.appendChild(checkboxInputLabel);
             //
-            checkbox_input.addEventListener("change", (evt) => {
-                this.#input.value = ""
+            checkboxInput.addEventListener("change", (evt) => {
+                this.#input.value = "";
                 // Выбор пункта — то же, что `aria-selected` у опции (см. `selectionState`)
-                option.setAttribute("aria-selected", evt.target.checked ? "true" : "false")
-                const test_main = document.createElement("multicombobox_option_added_main")
-                test_main.id = id_name + "_chip"
-                const test_body = document.createElement("multicombobox_option_added_body")
-                test_body.innerText = opt.title;
-                test_body.title = opt.title;
-                const test_remove = document.createElement("multicombobox_option_added_remove")
-                test_remove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "12px").getHTML()
-                test_main.appendChild(test_body)
-                test_main.appendChild(test_remove)
+                option.setAttribute("aria-selected", evt.target.checked ? "true" : "false");
+                const optionChip = document.createElement("multicombobox_option_added_main");
+                optionChip.id = identifier + "_chip";
+                const optionChipBody = document.createElement("multicombobox_option_added_body");
+                optionChipBody.innerText = opt.title;
+                optionChipBody.title = opt.title;
+                const optionChipRemove = document.createElement("multicombobox_option_added_remove");
+                optionChipRemove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "12px").getHTML();
+                optionChip.appendChild(optionChipBody);
+                optionChip.appendChild(optionChipRemove);
                 //
-                test_remove.addEventListener("click", () => checkbox_input.click())
+                optionChipRemove.addEventListener("click", () => checkboxInput.click());
                 //
                 if (evt.target.checked) {
-                    this.#MultiComboBox_options.insertBefore(test_main, this.#input)
-                    this.#value.push(opt)
+                    this.#MultiComboBoxOptions.insertBefore(optionChip, this.#input);
+                    this.#value.push(opt);
                     // Новая метка могла не влезть в строку — пересчёт счётчика «+N»
                     this.#scheduleOverflow();
                 } else {
                     // Метка снимается по своему id, а значение — по самому описанию варианта
-                    this.#removeOptionById(id_name)
-                    const index = this.#value.indexOf(opt)
-                    if (index !== -1) this.#value.splice(index, 1)
+                    this.#removeOptionById(identifier);
+                    const index = this.#value.indexOf(opt);
+                    if (index !== -1) this.#value.splice(index, 1);
                 }
                 const eventAwesome = new CustomEvent("chui_multi_combo_option_changed", {
                     detail: {
-                        values: this.#value
+                        values: this.#value,
                     },
                 });
-                this.#MultiComboBox_main.dispatchEvent(eventAwesome)
-            })
+                this.#MultiComboBoxMain.dispatchEvent(eventAwesome);
+            });
             this.#dropdown.appendChild(option);
         }
-        this.#input.removeEventListener('input', this.#filter_sections_event);
-        this.#input.addEventListener('input', this.#filter_options_event);
+        this.#input.removeEventListener("input", this.#filterSectionsEvent);
+        this.#input.addEventListener("input", this.#filterOptionsEvent);
     }
-    #filter_sections_event = (event) => {
-        let dropdown = this.#dropdown;
-        for (let section of dropdown.childNodes) {
-            for (let option of section.childNodes) {
-                let attr = option.getAttribute("option_title")
+    #filterSectionsEvent = (event) => {
+        const dropdown = this.#dropdown;
+        for (const section of dropdown.childNodes) {
+            for (const option of section.childNodes) {
+                const attr = option.getAttribute("option_title");
                 if (attr) {
                     if (!attr.toLowerCase().includes(event.target.value.toLowerCase())) {
-                        option.style.display = 'none'
-                        dropdown.style.height = 'max-content'
+                        option.style.display = "none";
+                        dropdown.style.height = "max-content";
                     } else {
-                        option.style.display = 'flex'
-                        dropdown.style.height = this.#dropdown_height
+                        option.style.display = "flex";
+                        dropdown.style.height = this.#dropdownHeight;
                     }
                 }
             }
         }
-    }
-    #filter_options_event = (event) => {
-        let dropdown = this.#dropdown;
-        let query = event.target.value.toLowerCase();
-        for (let option of dropdown.childNodes) {
+    };
+    #filterOptionsEvent = (event) => {
+        const dropdown = this.#dropdown;
+        const query = event.target.value.toLowerCase();
+        for (const option of dropdown.childNodes) {
             if (typeof option.getAttribute !== "function") continue;
-            let title = option.getAttribute('option_title');
+            const title = option.getAttribute("option_title");
             if (title === null) continue;
             if (!title.toLowerCase().includes(query)) {
-                option.style.display = 'none'
-                dropdown.style.height = 'max-content'
+                option.style.display = "none";
+                dropdown.style.height = "max-content";
             } else {
-                option.style.display = 'flex'
-                dropdown.style.height = this.#dropdown_height
+                option.style.display = "flex";
+                dropdown.style.height = this.#dropdownHeight;
             }
         }
+    };
+    getName() {
+        return this.#input.name;
+    }
+    getValue() {
+        return this.#value;
     }
-    getName() { return this.#input.name; }
-    getValue() { return this.#value }
     setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
+        this.#input.disabled = boolean;
         if (boolean) {
-            this.#MultiComboBox_second.classList.add("multicombobox_disabled")
-            this.#input.className = "multicombobox_input_disabled"
-            this.#label.className = "multicombobox_label_disabled"
-            this.#button_open.remove();
-            this.#MultiComboBox_second.appendChild(this.#button_open_disabled);
+            this.#MultiComboBoxSecond.classList.add("multicombobox_disabled");
+            this.#input.className = "multicombobox_input_disabled";
+            this.#label.className = "multicombobox_label_disabled";
+            this.#buttonOpen.remove();
+            this.#MultiComboBoxSecond.appendChild(this.#buttonOpenDisabled);
         } else {
-            this.#MultiComboBox_second.classList.remove("multicombobox_disabled")
-            this.#input.className = "multicombobox_input"
-            this.#label.className = "multicombobox_label"
-            this.#button_open_disabled.remove();
-            this.#MultiComboBox_second.appendChild(this.#button_open);
+            this.#MultiComboBoxSecond.classList.remove("multicombobox_disabled");
+            this.#input.className = "multicombobox_input";
+            this.#label.className = "multicombobox_label";
+            this.#buttonOpenDisabled.remove();
+            this.#MultiComboBoxSecond.appendChild(this.#buttonOpen);
         }
     }
     #removeOptionById(id) {
         // У метки свой id (id чекбокса + «_chip»): сам чекбокс из разметки не убирается
-        const chip_id = id + "_chip";
-        for (let node of [...this.#MultiComboBox_options.childNodes]) {
-            if (node.id === chip_id) node.remove()
+        const chipId = id + "_chip";
+        for (const node of [...this.#MultiComboBoxOptions.childNodes]) {
+            if (node.id === chipId) node.remove();
         }
-        const index = this.#value.findIndex((item) => item.id === id)
-        if (index !== -1) this.#value.splice(index, 1)
+        const index = this.#value.findIndex((item) => item.id === id);
+        if (index !== -1) this.#value.splice(index, 1);
         // Место в строке освободилось: прежде скрытые значения могут вернуться
         this.#scheduleOverflow();
     }
     clear() {
-        this.#input.value = ""
-        this.#value = []
-        for (let node of [...this.#MultiComboBox_options.childNodes]) {
-            if (node !== this.#input && node !== this.#more) node.remove()
+        this.#input.value = "";
+        this.#value = [];
+        for (const node of [...this.#MultiComboBoxOptions.childNodes]) {
+            if (node !== this.#input && node !== this.#more) node.remove();
         }
-        for (let checkbox of this.#dropdown.querySelectorAll('input[type="checkbox"]')) {
+        for (const checkbox of this.#dropdown.querySelectorAll('input[type="checkbox"]')) {
             checkbox.checked = false;
         }
         // Отметка выбора снимается вместе с чекбоксами: прежде `aria-selected` оставался
         // «true» и список после сброса формы показывал прошлый выбор
-        for (let option of this.#dropdown.querySelectorAll('.multi_combobox_option')) {
+        for (const option of this.#dropdown.querySelectorAll(".multi_combobox_option")) {
             option.setAttribute("aria-selected", "false");
         }
         this.#scheduleOverflow();
     }
     #setDropdownDirection() {
-        const placement = dropdownPlacement(this.#dropdown, this.#MultiComboBox_second);
+        const placement = dropdownPlacement(this.#dropdown, this.#MultiComboBoxSecond);
         // Зазор до поля держит CSS (`top: calc(100% + 4px)`), как у остальных списков:
         // прежде отступ задавался числом в пикселях под высоту прежнего поля 35 px
-        this.#dropdown.style.top = placement.up ? 'auto' : '';
-        this.#dropdown.style.bottom = placement.up ? 'calc(100% + 4px)' : '';
+        this.#dropdown.style.top = placement.up ? "auto" : "";
+        this.#dropdown.style.bottom = placement.up ? "calc(100% + 4px)" : "";
         // Слой не вылезает за видимую часть контейнера: лишнее уходит в прокрутку списка
         if (placement.maxHeight > 0) this.#dropdown.style.maxHeight = `${placement.maxHeight}px`;
-        else this.#dropdown.style.removeProperty('max-height');
+        else this.#dropdown.style.removeProperty("max-height");
     }
 
     /**
@@ -363,7 +389,7 @@ class MultiComboBox {
      * не «съедает» место для набора.
      */
     #syncOverflow() {
-        const options = this.#MultiComboBox_options;
+        const options = this.#MultiComboBoxOptions;
         const chips = [...options.querySelectorAll("multicombobox_option_added_main")];
         const available = options.clientWidth;
         for (const chip of chips) chip.hidden = false;
@@ -378,7 +404,7 @@ class MultiComboBox {
         // Не помещается: ищем, сколько значений показать числом, чтобы строка сошлась
         for (let hidden = 1; hidden <= chips.length; hidden += 1) {
             this.#more.innerText = `+${hidden}`;
-            this.#more.setAttribute("aria-label", I18n.t("forms.multiComboMore", {count: hidden}));
+            this.#more.setAttribute("aria-label", I18n.t("forms.multiComboMore", { count: hidden }));
             this.#more.hidden = false;
             const counter = this.#more.getBoundingClientRect().width + gap;
             if (total(chips.length - hidden) + counter + reserve <= available) {
@@ -392,19 +418,23 @@ class MultiComboBox {
 
     /** Пересчёт счётчика после текущего кадра: к этому моменту разметка значений уже уложена */
     #scheduleOverflow() {
-        if (this.#overflow_frame !== undefined) return;
-        this.#overflow_frame = requestAnimationFrame(() => {
-            this.#overflow_frame = undefined;
+        if (this.#overflowFrame !== undefined) return;
+        this.#overflowFrame = requestAnimationFrame(() => {
+            this.#overflowFrame = undefined;
             this.#syncOverflow();
         });
     }
-    set() { return this.#MultiComboBox_main; }
+    set() {
+        return this.#MultiComboBoxMain;
+    }
 }
 
 function setOptionDisplay(element) {
     // Скрытая фильтром секция возвращается снятием инлайнового `display`:
     // базовый вид строки (флекс) задаёт CSS
-    for (let option of element.childNodes) { option.style.removeProperty("display"); }
+    for (const option of element.childNodes) {
+        option.style.removeProperty("display");
+    }
 }
 
-exports.MultiComboBox = MultiComboBox
+exports.MultiComboBox = MultiComboBox;