chuijs 4.0.1 → 4.0.3

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

@@ -11,52 +11,52 @@ radiobutton {
     /* Тот же шаг шрифта, что у CheckBox: квадратик и кружок должны быть одного размера */
     font-size: var(--font_default_size);
     margin: var(--margin);
-    width: max-content
+    width: max-content;
 }
 
 .radiobutton {
     position: absolute;
     z-index: -1;
-    opacity: 0
+    opacity: 0;
 }
 
-.radiobutton+label {
+.radiobutton + label {
     display: inline-flex;
     align-items: center;
-    color:var(--text_color)
+    color: var(--text_color);
 }
 
-.radiobutton+label::before {
+.radiobutton + label::before {
     font-size: var(--font_default_size);
-    content: '';
+    content: "";
     display: flex;
     width: 1.2em;
     height: 1.2em;
     flex-shrink: 0;
-    flex-grow:0;
-    border-radius:50%;
-    margin-inline-end:10px;
-    align-items:center;
-    justify-content:center;
+    flex-grow: 0;
+    border-radius: 50%;
+    margin-inline-end: 10px;
+    align-items: center;
+    justify-content: center;
     color: transparent;
     background: var(--element_background);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
 }
 
-.radiobutton:not(:disabled):not(:checked)+label:hover::before {
+.radiobutton:not(:disabled):not(:checked) + label:hover::before {
     background: var(--element_background_hover);
 }
-.radiobutton:not(:disabled):active+label::before {
+.radiobutton:not(:disabled):active + label::before {
     background: radial-gradient(circle, var(--text_color_hover) 22%, var(--blue_prime_background) 22%);
 }
 
-.radiobutton:focus-visible+label::before {
+.radiobutton:focus-visible + label::before {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
 
-.radiobutton:checked+label::before {
+.radiobutton:checked + label::before {
     background: radial-gradient(circle, var(--text_color_hover) 22%, var(--blue_prime_background) 22%);
     border: none;
     box-shadow: 0 0 1px 0 var(--blue_prime_background);
@@ -64,24 +64,24 @@ radiobutton {
 
 .labelr {
     cursor: pointer;
-    font-size: var(--font_default_size)
+    font-size: var(--font_default_size);
 }
 
-.radiobutton:disabled+label {
+.radiobutton:disabled + label {
     cursor: not-allowed;
     color: var(--text_color_disabled);
 }
 
-.radiobutton:disabled:not(:checked)+label::before {
+.radiobutton:disabled:not(:checked) + label::before {
     cursor: not-allowed;
     background: var(--element_background_disabled);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
 }
 
-.radiobutton:disabled:checked+label::before {
+.radiobutton:disabled:checked + label::before {
     cursor: not-allowed;
     background: radial-gradient(circle, var(--text_color_disabled) 22%, var(--element_background_disabled) 22%);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
-}
+}

package/framework/components/chui_inputs/chui_rating/rating.js

@@ -1,7 +1,7 @@
-const {setStyles} = require('../../../modules/chui_functions');
-const {Icon, Icons} = require('../../chui_icons/icons');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../../modules/chui_functions");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Оценка звёздами: поле ввода от 0 до `max`.
@@ -36,7 +36,7 @@ const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
 class Rating {
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -61,21 +61,23 @@ class Rating {
     #dragging = false;
     #moved = false;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        value: Number(),
-        max: Number(),
-        readOnly: Boolean(),
-        disabled: Boolean(),
-        size: String(),
-        icon: String(),
-        iconEmpty: String(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            value: Number(),
+            max: Number(),
+            readOnly: Boolean(),
+            disabled: Boolean(),
+            size: String(),
+            icon: String(),
+            iconEmpty: String(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Rating");
         Rating.#counter += 1;
         this.#id = options.id === undefined ? `chui_rating_${Rating.#counter}` : options.id;
@@ -150,7 +152,9 @@ class Rating {
 
     /** Читаемое значение: «4 из 5» или «Нет оценки» */
     getValueText() {
-        return this.#value === 0 ? I18n.t("forms.ratingNone") : I18n.t("forms.ratingOf", {value: this.#value, max: this.#max});
+        return this.#value === 0
+            ? I18n.t("forms.ratingNone")
+            : I18n.t("forms.ratingOf", { value: this.#value, max: this.#max });
     }
 
     getDisabled() {
@@ -417,4 +421,4 @@ class Rating {
     static SMALL_ICON_SIZE = "14px";
 }
 
-exports.Rating = Rating
+exports.Rating = Rating;

package/framework/components/chui_inputs/chui_select_box/select_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 { 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 {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class Select {
     #id = require("randomstring").generate();
     #id_sb = require("randomstring").generate();
-    #Select_main = document.createElement('chui_selectbox');
-    #Select_second = document.createElement('selectbox');
-    #label = document.createElement('label');
-    #input = document.createElement('input');
-    #button_open = document.createElement('select_button_open');
-    #button_open_disabled = document.createElement('select_button_open');
+    #Select_main = document.createElement("chui_selectbox");
+    #Select_second = document.createElement("selectbox");
+    #label = document.createElement("label");
+    #input = document.createElement("input");
+    #button_open = document.createElement("select_button_open");
+    #button_open_disabled = document.createElement("select_button_open");
     #disabled_trigger = false;
     // Признак «вариант только что выбран мышью» — см. обработчик клика по полю
     #chosen_by_mouse = false;
-    #dropdown = document.createElement('selectbox_dropdown');
+    #dropdown = document.createElement("selectbox_dropdown");
     #a11y = undefined;
     // Слушатель окна храним полем, чтобы можно было снять в destroy()
     // Клик вне поля закрывает список. Проверять надо весь контрол целиком, а не только
@@ -27,38 +27,51 @@ class Select {
     #window_click_event = (event) => {
         if (!this.#Select_main.contains(event.target)) this.#closeDropdown();
     };
-    constructor(options = {
-        name: String(), title: String(), placeholder: String(),
-        width: String(), required: Boolean()
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Select');
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            required: Boolean(),
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Select");
         if (options.width !== undefined) this.#Select_main.style.width = options.width;
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
         if (options.title !== undefined) {
-            this.#label.classList.add('select_label')
+            this.#label.classList.add("select_label");
             this.#label.innerText = options.title;
-            this.#label.setAttribute('for', this.#id_sb);
+            this.#label.setAttribute("for", this.#id_sb);
             this.#Select_main.appendChild(this.#label);
         }
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: для списка required означает «есть выбранный вариант»
         Validate.installField(this, options, this.#Select_second, undefined, () => this.getValue());
-        this.#input.setAttribute('id', this.#id_sb);
-        this.#input.classList.add('selectbox_input');
-        this.#input.type = 'text';
+        this.#input.setAttribute("id", this.#id_sb);
+        this.#input.classList.add("selectbox_input");
+        this.#input.type = "text";
         if (options.name !== undefined) this.#input.name = options.name;
-        this.#input.readOnly = true
-        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.#input.readOnly = true;
+        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();
         // Курсор выключенного поля даёт `.selectbox_disabled`: `cursor` наследуется
-        this.#dropdown.setAttribute('id', this.#id);
-        this.#Select_second.appendChild(this.#input)
-        this.#Select_second.appendChild(this.#button_open)
-        this.#Select_second.appendChild(this.#dropdown)
+        this.#dropdown.setAttribute("id", this.#id);
+        this.#Select_second.appendChild(this.#input);
+        this.#Select_second.appendChild(this.#button_open);
+        this.#Select_second.appendChild(this.#dropdown);
         //LISTENERS
-        this.#input.addEventListener('focus', () => this.#openDropdown())
-        this.#input.addEventListener('blur', () => this.#closeDropdown())
-        this.#Select_second.addEventListener('click', (event) => {
+        this.#input.addEventListener("focus", () => this.#openDropdown());
+        this.#input.addEventListener("blur", () => this.#closeDropdown());
+        this.#Select_second.addEventListener("click", (event) => {
             // Клик по полю или стрелке открывает список сам. Одного `focus` мало:
             // если фокус уже в поле (повторный клик, диалог поставил фокус первым),
             // событие `focus` не придёт и список не раскроется
@@ -76,44 +89,44 @@ class Select {
         });
         // Слой списка не забирает фокус: клик по его отступу не должен закрывать список
         // (иначе поле теряло бы фокус на пустом месте слоя)
-        this.#dropdown.addEventListener('mousedown', (event) => event.preventDefault());
-        window.addEventListener('click', this.#window_click_event);
-        this.#input.addEventListener('input', (event) => {
+        this.#dropdown.addEventListener("mousedown", (event) => event.preventDefault());
+        window.addEventListener("click", this.#window_click_event);
+        this.#input.addEventListener("input", (event) => {
             let dropdown = this.#dropdown;
             for (let option of dropdown.childNodes) {
-                if (!option.getAttribute('option_value').includes(event.target.value)) {
-                    option.style.display = 'none'
+                if (!option.getAttribute("option_value").includes(event.target.value)) {
+                    option.style.display = "none";
                 } else {
-                    option.style.display = 'block'
+                    option.style.display = "block";
                 }
             }
             this.#a11y.refresh();
         });
-        this.#Select_main.appendChild(this.#Select_second)
+        this.#Select_main.appendChild(this.#Select_second);
         // Клавиатура и aria: фокус в поле, стрелки/Home/End/Enter по опциям, Escape закрывает
         this.#a11y = new ComboboxKeyboard(this.#input, {
             dropdown: this.#dropdown,
             optionSelector: "selectbox_option",
             onEscape: () => this.#closeDropdown(),
-            onOpen: () => this.#openDropdown()
+            onOpen: () => this.#openDropdown(),
         });
     }
     #openDropdown() {
         if (this.#disabled_trigger) return;
-        this.#setOpenState(true)
+        this.#setOpenState(true);
         new Animation(this.#dropdown).fadeIn();
         setOptionDisplay(this.#dropdown);
         this.#setDropdownDirection();
         this.#a11y.setExpanded(true);
     }
     #closeDropdown() {
-        this.#setOpenState(false)
+        this.#setOpenState(false);
         new Animation(this.#dropdown).fadeOut();
         if (this.#a11y !== undefined) this.#a11y.setExpanded(false);
     }
     /** Полное удаление: снять слушатели окна и клавиатурный слой */
     destroy() {
-        window.removeEventListener('click', this.#window_click_event);
+        window.removeEventListener("click", this.#window_click_event);
         this.#a11y.destroy();
         this.#closeDropdown();
     }
@@ -139,7 +152,8 @@ class Select {
     setValue(value = String(), silent = Boolean()) {
         const text = String(value);
         const options = [...this.#dropdown.children];
-        const option = options.find((item) => item.getAttribute("option_value") === text) ??
+        const option =
+            options.find((item) => item.getAttribute("option_value") === text) ??
             options.find((item) => item.getAttribute("option_title") === text);
         if (option === undefined) return this;
         this.#applyOption(option, silent === true);
@@ -183,8 +197,8 @@ class Select {
     }
     /** Выбор опции: подпись и значение идут в поле и в атрибуты корня, затем слушатели */
     #applyOption(option = new HTMLElement(), silent = Boolean()) {
-        const title = option.getAttribute('option_title');
-        const value = option.getAttribute('option_value');
+        const title = option.getAttribute("option_title");
+        const value = option.getAttribute("option_value");
         this.#input.value = title;
         this.#Select_main.setAttribute("option_title", title);
         this.#Select_main.setAttribute("option_value", value);
@@ -193,12 +207,14 @@ class Select {
         // Выбор варианта закрывает список: клику по опции это уже не поручить —
         // click схлопывается до общего предка (mousedown был в поле, mouseup — в слое)
         this.#closeDropdown();
-        this.#Select_main.dispatchEvent(new CustomEvent("chui_select_option_changed", {
-            detail: {
-                title: title,
-                value: value
-            },
-        }));
+        this.#Select_main.dispatchEvent(
+            new CustomEvent("chui_select_option_changed", {
+                detail: {
+                    title: title,
+                    value: value,
+                },
+            })
+        );
     }
     /**
      * Выбор опции: подпись и значение идут в поле и в атрибуты корня, затем слушатели.
@@ -207,13 +223,13 @@ class Select {
      * закрывался бы по blur до щелчка, и выбор терялся бы.
      */
     #wireOption(option = new HTMLElement()) {
-        option.addEventListener('mousedown', (event) => {
+        option.addEventListener("mousedown", (event) => {
             event.preventDefault();
             // Признак «выбрано мышью»: гасит повторное раскрытие списка на `mouseup` по полю
             this.#chosen_by_mouse = true;
             this.#applyOption(option, false);
         });
-        option.addEventListener('click', (event) => {
+        option.addEventListener("click", (event) => {
             if (event.detail !== 0) return;
             this.#applyOption(option, false);
         });
@@ -221,8 +237,8 @@ class Select {
     addOption(title, value) {
         let option = document.createElement(`selectbox_option`);
         option.innerHTML = title;
-        option.setAttribute('option_title', title);
-        option.setAttribute('option_value', value);
+        option.setAttribute("option_title", title);
+        option.setAttribute("option_value", value);
         this.#wireOption(option);
         this.#dropdown.appendChild(option);
         this.#a11y.refresh();
@@ -231,8 +247,8 @@ class Select {
         for (let opt of options) {
             let option = document.createElement(`selectbox_option`);
             option.innerHTML = opt.title;
-            option.setAttribute('option_title', opt.title);
-            option.setAttribute('option_value', opt.value);
+            option.setAttribute("option_title", opt.title);
+            option.setAttribute("option_value", opt.value);
             this.#wireOption(option);
             this.#dropdown.appendChild(option);
         }
@@ -247,31 +263,35 @@ class Select {
      */
     setDefaultOption(object = Object()) {
         const wanted = object !== null && typeof object === "object" ? object.value : object;
-        let opt = this.#dropdown.getElementsByTagName('selectbox_option');
+        let opt = this.#dropdown.getElementsByTagName("selectbox_option");
         for (let i = 0; i < opt.length; i++) {
             let test = opt.item(i);
-            if (test.getAttribute('option_value') === String(wanted)) test.click()
+            if (test.getAttribute("option_value") === String(wanted)) test.click();
         }
     }
     addValueChangeListener(listener = () => {}) {
-        this.#Select_main.addEventListener("chui_select_option_changed", listener)
+        this.#Select_main.addEventListener("chui_select_option_changed", listener);
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getValue() {
+        return this.#input.value;
     }
-    getName() { return this.#input.name; }
-    getValue() { return this.#input.value; }
     setDisabled(boolean = Boolean()) {
-        this.#disabled_trigger = boolean
+        this.#disabled_trigger = boolean;
         if (boolean) {
-            this.#setOpenState(false)
+            this.#setOpenState(false);
             if (this.#a11y !== undefined) this.#a11y.setExpanded(false);
-            this.#Select_second.classList.add("selectbox_disabled")
-            this.#input.className = "selectbox_input_disabled"
-            this.#label.className = "select_label_disabled"
+            this.#Select_second.classList.add("selectbox_disabled");
+            this.#input.className = "selectbox_input_disabled";
+            this.#label.className = "select_label_disabled";
             this.#button_open.remove();
             this.#Select_second.appendChild(this.#button_open_disabled);
         } else {
-            this.#Select_second.classList.remove("selectbox_disabled")
-            this.#input.className = "selectbox_input"
-            this.#label.className = "select_label"
+            this.#Select_second.classList.remove("selectbox_disabled");
+            this.#input.className = "selectbox_input";
+            this.#label.className = "select_label";
             this.#button_open_disabled.remove();
             this.#Select_second.appendChild(this.#button_open);
         }
@@ -280,25 +300,29 @@ class Select {
         // Рамку активного поля держит общее правило темы (`selectbox:focus-within`
         // в global_style.css, вместе с кольцом), а не индайн компонента: индайновая рамка
         // перебивала тему и мешала централизации состояний
-        this.#button_open.style.transform = opened ? 'rotate(180deg)' : 'rotate(0deg)'
+        this.#button_open.style.transform = opened ? "rotate(180deg)" : "rotate(0deg)";
     }
     #setDropdownDirection() {
         const placement = dropdownPlacement(this.#dropdown, this.#Select_second);
         // Зазор до поля держит CSS (`top: calc(100% + 4px)`), вверх — то же число через `bottom`:
         // так список отстоит от поля на один зазор в обе стороны (вверх - `bottom`)
-        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");
+    }
+    set() {
+        return this.#Select_main;
     }
-    set() { return this.#Select_main; }
 }
 
 function setOptionDisplay(element = new HTMLElement()) {
     // Скрытый фильтром вариант показывается снятием инлайнового `display`:
     // базовый вид строки (блок) задаёт CSS, а не этот обход
-    for (let option of element.childNodes) { option.style.removeProperty("display"); }
+    for (let option of element.childNodes) {
+        option.style.removeProperty("display");
+    }
 }
 
-exports.Select = Select
+exports.Select = Select;

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

@@ -9,12 +9,12 @@ chui_selectbox {
     flex-direction: column;
     height: max-content;
     margin: var(--margin);
-    width: var(--control_width)
+    width: var(--control_width);
 }
 
 selectbox {
     position: relative;
-    display:flex;
+    display: flex;
     outline: none;
     height: max-content;
     width: -webkit-fill-available;
@@ -28,7 +28,7 @@ selectbox {
 
 .selectbox_input {
     cursor: pointer;
-    width:100%;
+    width: 100%;
     display: block;
     outline: none;
     margin: 0;
@@ -59,8 +59,8 @@ selectbox_dropdown {
     -webkit-backdrop-filter: var(--global_blur);
     color: var(--text_color);
     outline: none;
-    position:absolute;
-    display:none;
+    position: absolute;
+    display: none;
     height: max-content;
     border-radius: var(--border_radius);
     padding: var(--control_padding);
@@ -124,8 +124,8 @@ selectbox_option:active {
     width: max-content;
     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);
 }
 
 /* DISABLED STYLES */
@@ -137,7 +137,7 @@ selectbox_option:active {
 
 .selectbox_input_disabled {
     cursor: not-allowed;
-    width:100%;
+    width: 100%;
     margin: 0;
     padding: var(--control_padding) 0 var(--main_padding);
     background: transparent;
@@ -162,6 +162,6 @@ selectbox_option:active {
     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);
+}

package/framework/components/chui_inputs/chui_slider/slider.js

@@ -1,5 +1,5 @@
-const {setStyles} = require('../../../modules/chui_functions');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../../modules/chui_functions");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Ползунок: одно значение или диапазон (`range: true`).
@@ -48,23 +48,25 @@ class Slider {
     #input_listeners = [];
     #dragging = undefined;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        min: Number(),
-        max: Number(),
-        step: Number(),
-        value: undefined,
-        range: Boolean(),
-        disabled: Boolean(),
-        width: String(),
-        showValue: Boolean(),
-        format: undefined,
-        changeListener: undefined,
-        inputListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            min: Number(),
+            max: Number(),
+            step: Number(),
+            value: undefined,
+            range: Boolean(),
+            disabled: Boolean(),
+            width: String(),
+            showValue: Boolean(),
+            format: undefined,
+            changeListener: undefined,
+            inputListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Slider");
         Slider.#counter += 1;
         this.#id = options.id === undefined ? `chui_slider_${Slider.#counter}` : options.id;
@@ -93,9 +95,7 @@ class Slider {
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#header.hidden = true;
         if (options.showValue === false) this.#value_text.hidden = true;
-        this.setValue(options.value === undefined
-            ? (this.#range ? [this.#min, this.#max] : this.#min)
-            : options.value);
+        this.setValue(options.value === undefined ? (this.#range ? [this.#min, this.#max] : this.#min) : options.value);
         if (options.disabled === true) this.setDisabled(true);
         if (options.width !== undefined) this.setWidth(options.width);
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
@@ -279,9 +279,12 @@ class Slider {
     }
 
     #thumbLabel(index = Number()) {
-        const base = this.#label === undefined
-            ? (this.#title_text === undefined ? I18n.t("forms.sliderValue") : this.#title_text)
-            : this.#label;
+        const base =
+            this.#label === undefined
+                ? this.#title_text === undefined
+                    ? I18n.t("forms.sliderValue")
+                    : this.#title_text
+                : this.#label;
         if (!this.#range) return base;
         return `${base}: ${index === 0 ? I18n.t("forms.sliderMin") : I18n.t("forms.sliderMax")}`;
     }
@@ -422,4 +425,4 @@ class Slider {
     };
 }
 
-exports.Slider = Slider
+exports.Slider = Slider;

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

@@ -76,7 +76,8 @@ slider_thumb {
     /* Кружок целиком — 20px: рамка 2px прибавляется к 16px, а не входит в них, поэтому
        половина равна 10px. С прежними -8px бегунок стоял на 2px ниже дорожки
        и на 2px правее своего значения */
-    margin-block: -10px 0; margin-inline: -10px 0;
+    margin-block: -10px 0;
+    margin-inline: -10px 0;
     border-radius: var(--radius_circle);
     background: var(--blue_prime_background);
     border: 2px solid var(--main_background);