chuijs 4.0.2 → 4.0.3

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

@@ -1,23 +1,23 @@
-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');
+    #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;
     #a11y = undefined;
@@ -26,73 +26,85 @@ class MultiComboBox {
         if (!this.#MultiComboBox_second.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');
+    #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.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.#label.setAttribute("for", this.#id_cb);
             this.#MultiComboBox_main.appendChild(this.#label);
         }
         if (options.optionsLen !== undefined) {
-            this.#dropdown_height = (OPTION_ROW_HEIGHT * options.optionsLen) + "px";
+            this.#dropdown_height = OPTION_ROW_HEIGHT * options.optionsLen + "px";
         }
         this.#dropdown.style.height = this.#dropdown_height;
         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.#id_cb);
+        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.#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();
         // Курсор выключенного поля даёт `.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.#MultiComboBox_second.appendChild(this.#MultiComboBox_options);
+        this.#MultiComboBox_options.appendChild(this.#input);
         // Счётчик выбранных значений, не поместившихся в строку: поле держит одну линию
         // (--control_height) и не растёт от выбора (`#syncOverflow`)
         this.#more.hidden = true;
         this.#more.setAttribute("role", "img");
-        this.#MultiComboBox_options.appendChild(this.#more)
+        this.#MultiComboBox_options.appendChild(this.#more);
         // Ширину строки задаёт вёрстка вокруг: о смене размера сообщает наблюдатель
         if (typeof ResizeObserver === "function") {
             this.#overflow_observer = new ResizeObserver(() => this.#scheduleOverflow());
             this.#overflow_observer.observe(this.#MultiComboBox_options);
         }
-        this.#MultiComboBox_second.appendChild(this.#button_open)
-        this.#MultiComboBox_second.appendChild(this.#dropdown)
+        this.#MultiComboBox_second.appendChild(this.#button_open);
+        this.#MultiComboBox_second.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.#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) => {
             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.#MultiComboBox_main.appendChild(this.#MultiComboBox_second);
         // Клавиатура и aria: фокус в поле, стрелки по опциям, Enter переключает чекбокс, Escape закрывает.
         // `selectionState` отделяет выбор от наведения: `aria-selected` читается с чекбокса.
         this.#a11y = new ComboboxKeyboard(this.#input, {
@@ -103,7 +115,7 @@ class MultiComboBox {
                 return box !== null && box.checked === true;
             },
             onEscape: () => this.#closeDropdown(),
-            onOpen: () => this.#openDropdown()
+            onOpen: () => this.#openDropdown(),
         });
         // Список допускает несколько выбранных пунктов
         this.#dropdown.setAttribute("aria-multiselectable", "true");
@@ -116,21 +128,21 @@ class MultiComboBox {
         this.#scheduleOverflow();
         this.#a11y.setExpanded(true);
         // Слушатель окна нужен только пока список открыт: закрытие по клику снаружи
-        window.addEventListener('click', this.#window_click_event);
+        window.addEventListener("click", this.#window_click_event);
     }
     #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.#window_click_event);
     }
     /** Полное удаление: снять слушатели окна и клавиатурный слой */
     destroy() {
-        window.removeEventListener('click', this.#window_click_event);
+        window.removeEventListener("click", this.#window_click_event);
         this.#a11y.destroy();
         this.#closeDropdown();
     }
     addValueChangeListener(listener = () => {}) {
-        this.#MultiComboBox_main.addEventListener("chui_multi_combo_option_changed", listener)
+        this.#MultiComboBox_main.addEventListener("chui_multi_combo_option_changed", listener);
     }
     clearDropdown() {
         this.#dropdown.innerHTML = "";
@@ -138,182 +150,186 @@ class MultiComboBox {
     addOptionsWithSections(options = []) {
         for (let 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"
+            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)
+            section.appendChild(section_title);
 
             for (let opt of sect.options) {
                 const id_name = require("randomstring").generate();
                 const option = document.createElement(`label`);
-                option.className = "multi_combobox_option"
-                option.setAttribute("option_title", opt.title)
+                option.className = "multi_combobox_option";
+                option.setAttribute("option_title", opt.title);
                 const checkbox_input_check = document.createElement("input_check");
-                checkbox_input_check.className = "checkmark"
+                checkbox_input_check.className = "checkmark";
                 const checkbox_input_label = document.createElement("input_text");
-                checkbox_input_label.className = "option_input_label"
+                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.className = "option_input";
+                checkbox_input.type = "checkbox";
                 checkbox_input.id = id_name;
                 checkbox_input.name = id_name;
                 //
-                option.appendChild(checkbox_input)
-                option.appendChild(checkbox_input_check)
-                option.appendChild(checkbox_input_label)
-                section.appendChild(option)
+                option.appendChild(checkbox_input);
+                option.appendChild(checkbox_input_check);
+                option.appendChild(checkbox_input_label);
+                section.appendChild(option);
                 //
                 checkbox_input.addEventListener("change", (evt) => {
-                    this.#input.value = ""
+                    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 test_main = document.createElement("multicombobox_option_added_main");
                         // Метка и чекбокс — два узла: id у каждого свой, иначе в документе два одинаковых id
-                        test_main.id = id_name + "_chip"
-                        const test_body = document.createElement("multicombobox_option_added_body")
+                        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)
+                        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);
                         this.#value.push({
                             id: id_name,
                             section: sect.title,
-                            option: opt
-                        })
+                            option: opt,
+                        });
                         // Новая метка могла не влезть в строку — пересчёт счётчика «+N»
                         this.#scheduleOverflow();
                     } else {
-                        this.#removeOptionById(id_name)
+                        this.#removeOptionById(id_name);
                     }
                     //
                     const eventAwesome = new CustomEvent("chui_multi_combo_option_changed", {
                         detail: {
-                            values: this.#value
+                            values: this.#value,
                         },
                     });
-                    this.#MultiComboBox_main.dispatchEvent(eventAwesome)
-                })
+                    this.#MultiComboBox_main.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.#filter_options_event);
+        this.#input.addEventListener("input", this.#filter_sections_event);
     }
     addOptions(...options) {
         for (let opt of options) {
             // Свой id на каждый вариант: одинаковые подписи больше не дают дубликатов id в документе
             const id_name = require("randomstring").generate();
             const option = document.createElement(`label`);
-            option.className = "multi_combobox_option"
-            option.setAttribute("option_title", opt.title)
+            option.className = "multi_combobox_option";
+            option.setAttribute("option_title", opt.title);
             const checkbox_input_check = document.createElement("input_check");
-            checkbox_input_check.className = "checkmark"
+            checkbox_input_check.className = "checkmark";
             const checkbox_input_label = document.createElement("input_text");
-            checkbox_input_label.className = "option_input_label"
+            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.className = "option_input";
+            checkbox_input.type = "checkbox";
             checkbox_input.id = id_name;
             checkbox_input.name = id_name;
             //
-            option.appendChild(checkbox_input)
-            option.appendChild(checkbox_input_check)
-            option.appendChild(checkbox_input_label)
+            option.appendChild(checkbox_input);
+            option.appendChild(checkbox_input_check);
+            option.appendChild(checkbox_input_label);
             //
             checkbox_input.addEventListener("change", (evt) => {
-                this.#input.value = ""
+                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")
+                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)
+                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);
                 //
-                test_remove.addEventListener("click", () => checkbox_input.click())
+                test_remove.addEventListener("click", () => checkbox_input.click());
                 //
                 if (evt.target.checked) {
-                    this.#MultiComboBox_options.insertBefore(test_main, this.#input)
-                    this.#value.push(opt)
+                    this.#MultiComboBox_options.insertBefore(test_main, 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(id_name);
+                    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.#MultiComboBox_main.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.#filter_sections_event);
+        this.#input.addEventListener("input", this.#filter_options_event);
     }
     #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")
+                let 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.#dropdown_height;
                     }
                 }
             }
         }
-    }
+    };
     #filter_options_event = (event) => {
         let dropdown = this.#dropdown;
         let query = event.target.value.toLowerCase();
         for (let option of dropdown.childNodes) {
             if (typeof option.getAttribute !== "function") continue;
-            let title = option.getAttribute('option_title');
+            let 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.#dropdown_height;
             }
         }
+    };
+    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.#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);
         } else {
-            this.#MultiComboBox_second.classList.remove("multicombobox_disabled")
-            this.#input.className = "multicombobox_input"
-            this.#label.className = "multicombobox_label"
+            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);
         }
@@ -322,25 +338,25 @@ class MultiComboBox {
         // У метки свой id (id чекбокса + «_chip»): сам чекбокс из разметки не убирается
         const chip_id = id + "_chip";
         for (let node of [...this.#MultiComboBox_options.childNodes]) {
-            if (node.id === chip_id) node.remove()
+            if (node.id === chip_id) 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 = []
+        this.#input.value = "";
+        this.#value = [];
         for (let node of [...this.#MultiComboBox_options.childNodes]) {
-            if (node !== this.#input && node !== this.#more) node.remove()
+            if (node !== this.#input && node !== this.#more) node.remove();
         }
         for (let 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 (let option of this.#dropdown.querySelectorAll(".multi_combobox_option")) {
             option.setAttribute("aria-selected", "false");
         }
         this.#scheduleOverflow();
@@ -349,11 +365,11 @@ class MultiComboBox {
         const placement = dropdownPlacement(this.#dropdown, this.#MultiComboBox_second);
         // Зазор до поля держит 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");
     }
 
     /**
@@ -378,7 +394,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) {
@@ -398,13 +414,17 @@ class MultiComboBox {
             this.#syncOverflow();
         });
     }
-    set() { return this.#MultiComboBox_main; }
+    set() {
+        return this.#MultiComboBox_main;
+    }
 }
 
 function setOptionDisplay(element) {
     // Скрытая фильтром секция возвращается снятием инлайнового `display`:
     // базовый вид строки (флекс) задаёт CSS
-    for (let option of element.childNodes) { option.style.removeProperty("display"); }
+    for (let option of element.childNodes) {
+        option.style.removeProperty("display");
+    }
 }
 
-exports.MultiComboBox = MultiComboBox
+exports.MultiComboBox = MultiComboBox;

package/framework/components/chui_inputs/chui_multi_combo_box/styles.css

@@ -10,7 +10,7 @@ chui_multicombobox {
     flex-direction: column;
     height: max-content;
     margin: var(--margin);
-    width: var(--control_width)
+    width: var(--control_width);
 }
 
 multicombobox {
@@ -48,7 +48,8 @@ multicombobox_options {
     flex: 1 1 40px;
     min-width: 40px;
     margin: 0;
-    padding-block: var(--control_padding) var(--control_padding); padding-inline: 6px 0;
+    padding-block: var(--control_padding) var(--control_padding);
+    padding-inline: 6px 0;
     background: transparent;
     color: var(--text_color);
     border: none;
@@ -90,8 +91,8 @@ multicombobox_dropdown {
     /* Только нижний отступ: боковой сдвигал подпись вправо от коробки поля */
     margin: 0 0 var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 multicombo_button_open {
@@ -158,7 +159,8 @@ multicombo_button_open {
     flex: 1 1 40px;
     min-width: 40px;
     margin: 0;
-    padding-block: var(--control_padding) var(--control_padding); padding-inline: 10px 0;
+    padding-block: var(--control_padding) var(--control_padding);
+    padding-inline: 10px 0;
     border: none;
     box-shadow: none;
     font-size: var(--font_default_size);
@@ -170,8 +172,8 @@ multicombo_button_open {
     width: max-content;
     margin: 0 0 var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color_disabled)
+    font-weight: 500;
+    color: var(--text_color_disabled);
 }
 
 multicombobox_option_added_main {