chuijs 4.0.1 → 4.0.3

package/framework/components/chui_inputs/chui_number/number.js

@@ -1,11 +1,11 @@
-const { Icon, Icons } = require('../../chui_icons/icons');
-const {makeKeyboardButton} = require('../../../modules/chui_a11y/chui_a11y');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { makeKeyboardButton } = require("../../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class NumberInput {
-    #chui_number_input = document.createElement('chui_number_input');
+    #chui_number_input = document.createElement("chui_number_input");
     #number_main = document.createElement("number_main");
     #number_button_minus = document.createElement("number_button_minus");
     #number_button_plus = document.createElement("number_button_plus");
@@ -13,16 +13,16 @@ class NumberInput {
     #number_button_plus_disabled = document.createElement("number_button_plus");
     #title = undefined;
     #id = require("randomstring").generate();
-    #input = document.createElement('input');
-    #label = document.createElement('label');
+    #input = document.createElement("input");
+    #label = document.createElement("label");
     constructor(options = { name: String(), title: String(), required: Boolean(), width: String() }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_NumberInput');
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_NumberInput");
         this.#title = options.title;
 
         // Кнопки «плюс» и «минус» — у правого и левого края поля (позицию держит CSS)
-        this.#number_button_plus.className = 'number_buttons number_buttons_plus';
+        this.#number_button_plus.className = "number_buttons number_buttons_plus";
         this.#number_button_plus.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--blue_prime_background)");
-        this.#number_button_minus.className = 'number_buttons number_buttons_minus';
+        this.#number_button_minus.className = "number_buttons number_buttons_minus";
         this.#number_button_minus.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--blue_prime_background)");
         // Кнопки — не нативные: делаем их доступными с клавиатуры и даём имена (глиф в дерево доступности не идёт)
         makeKeyboardButton(this.#number_button_minus);
@@ -32,17 +32,20 @@ class NumberInput {
 
         // Выключенные кнопки: только вид, действий нет — скринридеру их не отдаём.
         // Курсор берётся наследованием от корня `.number_main_disabled`
-        this.#number_button_plus_disabled.className = 'number_buttons number_buttons_plus';
+        this.#number_button_plus_disabled.className = "number_buttons number_buttons_plus";
         this.#number_button_plus_disabled.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--text_color_disabled)");
         this.#number_button_plus_disabled.setAttribute("aria-hidden", "true");
-        this.#number_button_minus_disabled.className = 'number_buttons number_buttons_minus';
-        this.#number_button_minus_disabled.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--text_color_disabled)");
+        this.#number_button_minus_disabled.className = "number_buttons number_buttons_minus";
+        this.#number_button_minus_disabled.innerHTML = this.#iconHTML(
+            Icons.CONTENT.REMOVE,
+            "var(--text_color_disabled)"
+        );
         this.#number_button_minus_disabled.setAttribute("aria-hidden", "true");
         //
 
-        this.#input.type = 'number';
-        this.#input.className = 'number_input';
-        this.#input.value = '0';
+        this.#input.type = "number";
+        this.#input.className = "number_input";
+        this.#input.value = "0";
         this.#input.id = this.#id;
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.required !== undefined) this.#input.required = options.required;
@@ -50,8 +53,8 @@ class NumberInput {
         Validate.installField(this, options, this.#number_main, undefined, () => this.#input.value);
         if (options.title !== undefined) {
             this.#label.innerText = options.title;
-            this.#label.classList.add('number_label')
-            this.#label.setAttribute('for', this.#id);
+            this.#label.classList.add("number_label");
+            this.#label.setAttribute("for", this.#id);
             this.#chui_number_input.appendChild(this.#label);
         }
         if (options.width !== undefined) this.#chui_number_input.style.width = options.width;
@@ -64,11 +67,11 @@ class NumberInput {
         this.#number_main.appendChild(this.#number_button_plus);
         this.#chui_number_input.appendChild(this.#number_main);
 
-        this.#number_button_plus.addEventListener('mousedown', (event) => {
+        this.#number_button_plus.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
-        this.#number_button_minus.addEventListener('mousedown', (event) => {
+        this.#number_button_minus.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
@@ -76,50 +79,64 @@ class NumberInput {
         // Клавиатура: фокус остаётся на кнопке (можно нажимать подряд), мышь — уводит в поле
         // Свои кнопки меняют значение программно, поэтому событие шлём сами: иначе о правке
         // не узнали бы ни слушатели, ни составные компоненты
-        this.#number_button_plus.addEventListener('click', (event) => {
+        this.#number_button_plus.addEventListener("click", (event) => {
             if (event.detail > 0) this.#input.focus();
-            this.#input.value++
-            this.#input.dispatchEvent(new Event("change", {bubbles: true}));
+            this.#input.value++;
+            this.#input.dispatchEvent(new Event("change", { bubbles: true }));
         });
-        this.#number_button_minus.addEventListener('click', (event) => {
+        this.#number_button_minus.addEventListener("click", (event) => {
             if (event.detail > 0) this.#input.focus();
-            this.#input.value--
-            this.#input.dispatchEvent(new Event("change", {bubbles: true}));
+            this.#input.value--;
+            this.#input.dispatchEvent(new Event("change", { bubbles: true }));
         });
     }
-    addInputListener(listener = () => {}) { this.#input.addEventListener("input", listener); }
-    addChangeListener(listener = () => {}) { this.#input.addEventListener("change", listener); }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
+    addInputListener(listener = () => {}) {
+        this.#input.addEventListener("input", listener);
+    }
+    addChangeListener(listener = () => {}) {
+        this.#input.addEventListener("change", listener);
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
     /** HTML глифа: иконка-лигатура не должна попадать в дерево доступности */
     #iconHTML(icon = String(), color = String()) {
         const glyph = new Icon(icon, undefined, color);
         glyph.set().setAttribute("aria-hidden", "true");
         return glyph.getHTML();
     }
-    getValue() { return this.#input.value; }
-    setValue(num = Number()) { this.#input.value = num; }
+    getValue() {
+        return this.#input.value;
+    }
+    setValue(num = Number()) {
+        this.#input.value = num;
+    }
     setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
+        this.#input.disabled = boolean;
         if (boolean) {
-            this.#number_main.classList.add("number_main_disabled")
-            this.#input.className = "number_input_disabled"
-            this.#label.className = "number_label_disabled"
+            this.#number_main.classList.add("number_main_disabled");
+            this.#input.className = "number_input_disabled";
+            this.#label.className = "number_label_disabled";
             this.#number_button_minus.remove();
             this.#number_button_plus.remove();
             this.#number_main.appendChild(this.#number_button_minus_disabled);
             this.#number_main.appendChild(this.#number_button_plus_disabled);
         } else {
-            this.#number_main.classList.remove("number_main_disabled")
-            this.#input.className = "number_input"
-            this.#label.className = "number_label"
+            this.#number_main.classList.remove("number_main_disabled");
+            this.#input.className = "number_input";
+            this.#label.className = "number_label";
             this.#number_button_minus_disabled.remove();
             this.#number_button_plus_disabled.remove();
             this.#number_main.appendChild(this.#number_button_minus);
             this.#number_main.appendChild(this.#number_button_plus);
         }
     }
-    set() { return this.#chui_number_input; }
+    set() {
+        return this.#chui_number_input;
+    }
 }
 
-exports.NumberInput = NumberInput
+exports.NumberInput = NumberInput;

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

@@ -54,8 +54,8 @@ number_main {
 
 /* Крутилка числа — системная: значение правят свои кнопки «плюс»/«минус». Правило только
    для своего поля, иначе оно скрывало бы чужие нативные поля во всём приложении */
-chui_number_input input[type=number]::-webkit-inner-spin-button {
-    -webkit-appearance: none
+chui_number_input input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
 }
 
 .number_input {
@@ -74,8 +74,8 @@ chui_number_input input[type=number]::-webkit-inner-spin-button {
     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 */
@@ -91,8 +91,8 @@ chui_number_input input[type=number]::-webkit-inner-spin-button {
     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);
 }
 
 .number_input_disabled {
@@ -105,4 +105,4 @@ chui_number_input input[type=number]::-webkit-inner-spin-button {
     text-align: center;
     border: none;
     font-size: var(--font_default_size);
-}
+}

package/framework/components/chui_inputs/chui_otp/otp.js

@@ -1,7 +1,7 @@
-const {setStyles} = require("../../../modules/chui_functions");
-const {Validate} = require("../../../modules/chui_validate/chui_validate");
-const {RovingKeyboard} = require("../../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { RovingKeyboard } = require("../../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Поле одноразового кода: несколько клеток по одному символу.
@@ -101,22 +101,24 @@ class OtpInput {
     #on_change = undefined;
     #on_complete = undefined;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        hint: String(),
-        length: Number(),
-        type: String(),
-        value: String(),
-        obscure: Boolean(),
-        disabled: Boolean(),
-        readOnly: Boolean(),
-        changeListener: undefined,
-        onChange: undefined,
-        onComplete: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            length: Number(),
+            type: String(),
+            value: String(),
+            obscure: Boolean(),
+            disabled: Boolean(),
+            readOnly: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+            onComplete: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_OtpInput");
         OtpInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_otp_input_${OtpInput.#counter}` : options.id;
@@ -147,13 +149,20 @@ class OtpInput {
         this.setLabel(this.#label_text === undefined ? I18n.t("forms.otpLabel") : this.#label_text);
         if (options.hint !== undefined) this.setHint(options.hint);
         this.#build();
-        this.#roving = new RovingKeyboard(this.#row, {itemSelector: ".otp_cell"});
+        this.#roving = new RovingKeyboard(this.#row, { itemSelector: ".otp_cell" });
         // «Неверный формат» у кода значит «код не до конца» — так и говорим
-        const messages = Object.assign({pattern: I18n.t("forms.otpIncomplete")}, options.messages);
-        Validate.installField(this, Object.assign({}, options, {
-            pattern: OtpInput.pattern(this.#type, this.#length),
-            messages: messages,
-        }), this.#root, this.#error, () => this.#value, this.#row);
+        const messages = Object.assign({ pattern: I18n.t("forms.otpIncomplete") }, options.messages);
+        Validate.installField(
+            this,
+            Object.assign({}, options, {
+                pattern: OtpInput.pattern(this.#type, this.#length),
+                messages: messages,
+            }),
+            this.#root,
+            this.#error,
+            () => this.#value,
+            this.#row
+        );
         if (options.value !== undefined && options.value !== "") this.setValue(options.value);
         this.setObscure(options.obscure === true);
         this.setReadOnly(options.readOnly === true);
@@ -406,7 +415,7 @@ class OtpInput {
             cell.setAttribute("autocomplete", "one-time-code");
             cell.setAttribute("autocapitalize", "off");
             cell.setAttribute("spellcheck", "false");
-            cell.setAttribute("aria-label", I18n.t("forms.otpCell", {index: index + 1, total: this.#length}));
+            cell.setAttribute("aria-label", I18n.t("forms.otpCell", { index: index + 1, total: this.#length }));
             cell.setAttribute("tabindex", index === 0 ? "0" : "-1");
             cell.addEventListener("input", this.#onInput);
             cell.addEventListener("keydown", this.#onKeyDown);
@@ -462,7 +471,7 @@ class OtpInput {
     #announce() {
         if (this.#value.length === 0) this.#status.innerText = "";
         else if (this.isComplete()) this.#status.innerText = I18n.t("forms.otpComplete");
-        else this.#status.innerText = I18n.t("forms.otpEntered", {entered: this.#value.length, total: this.#length});
+        else this.#status.innerText = I18n.t("forms.otpEntered", { entered: this.#value.length, total: this.#length });
     }
 
     // Раскладывает символы по клеткам от `start`; если места не хватает — с начала
@@ -555,4 +564,4 @@ class OtpInput {
     };
 }
 
-exports.OtpInput = OtpInput
+exports.OtpInput = OtpInput;

package/framework/components/chui_inputs/chui_password/password.js

@@ -1,32 +1,44 @@
-const { Icon, Icons } = require('../../chui_icons/icons');
-const {Animation} = require("../../../modules/chui_animations/animations");
-const {I18n} = require("../../../modules/chui_i18n/chui_i18n");
-const {makeKeyboardButton} = require("../../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { Animation } = require("../../../modules/chui_animations/animations");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
+const { makeKeyboardButton } = require("../../../modules/chui_a11y/chui_a11y");
 
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class PasswordInput {
     #id = require("randomstring").generate();
-    #password_main = document.createElement('password_main');
-    #see_pass_button = document.createElement('see_pass_button');
-    #see_pass_button_disabled = document.createElement('see_pass_button');
-    #chui_password_input = document.createElement('chui_password_input');
-    #label = document.createElement('label');
-    #input = document.createElement('input');
+    #password_main = document.createElement("password_main");
+    #see_pass_button = document.createElement("see_pass_button");
+    #see_pass_button_disabled = document.createElement("see_pass_button");
+    #chui_password_input = document.createElement("chui_password_input");
+    #label = document.createElement("label");
+    #input = document.createElement("input");
     #title = undefined;
     #error_message_password = document.createElement("error_message_password");
-    constructor(options = {
-        name: String(), title: String(), placeholder: String(), width: String(), required: Boolean()
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_PasswordInput');
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            required: Boolean(),
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_PasswordInput");
         this.#title = options.title;
-        this.#input.type = 'password';
+        this.#input.type = "password";
         this.#input.id = this.#id;
         if (options.name !== undefined) this.#input.name = options.name;
-        this.#input.className = 'password_input';
+        this.#input.className = "password_input";
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: тот же контракт validate/setError/clearError, своё сообщение под полем
-        Validate.installField(this, options, this.#password_main, this.#error_message_password, () => this.#input.value);
+        Validate.installField(
+            this,
+            options,
+            this.#password_main,
+            this.#error_message_password,
+            () => this.#input.value
+        );
         // Кнопка показа пароля — не значок, а кнопка: роль, остановка обхода и Enter/Space
         makeKeyboardButton(this.#see_pass_button);
         // У выключенного поля кнопка декоративна: фокус в неё не попадает
@@ -38,8 +50,8 @@ class PasswordInput {
         this.#syncSeeLabel();
         if (options.title !== undefined) {
             this.#label.innerText = options.title;
-            this.#label.classList.add('password_label')
-            this.#label.setAttribute('for', this.#id);
+            this.#label.classList.add("password_label");
+            this.#label.setAttribute("for", this.#id);
             this.#chui_password_input.appendChild(this.#label);
         }
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
@@ -48,38 +60,46 @@ class PasswordInput {
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
 
-        this.#see_pass_button.addEventListener('mousedown', (event) => {
+        this.#see_pass_button.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
 
         this.#password_main.appendChild(this.#input);
         this.#password_main.appendChild(this.#see_pass_button);
-        this.#see_pass_button.addEventListener('click', () => this.#showPassword());
+        this.#see_pass_button.addEventListener("click", () => this.#showPassword());
         this.#chui_password_input.appendChild(this.#password_main);
 
         //
         this.#input.addEventListener("input", () => {
             this.clearError();
             new Animation(this.#error_message_password).fadeOut();
-        })
+        });
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
+    getValue() {
+        return this.#input.value;
+    }
+    setValue(text = String()) {
+        this.#input.value = text;
     }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
-    getValue() { return this.#input.value; }
-    setValue(text = String()) { this.#input.value = text; }
     setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
+        this.#input.disabled = boolean;
         if (boolean) {
-            this.#password_main.classList.add("password_main_disabled")
-            this.#input.className = "password_input_disabled"
-            this.#label.className = "password_label_disabled"
+            this.#password_main.classList.add("password_main_disabled");
+            this.#input.className = "password_input_disabled";
+            this.#label.className = "password_label_disabled";
             this.#see_pass_button.remove();
             this.#password_main.appendChild(this.#see_pass_button_disabled);
         } else {
-            this.#password_main.classList.remove("password_main_disabled")
-            this.#input.className = "password_input"
-            this.#label.className = "password_label"
+            this.#password_main.classList.remove("password_main_disabled");
+            this.#input.className = "password_input";
+            this.#label.className = "password_label";
             this.#see_pass_button_disabled.remove();
             this.#password_main.appendChild(this.#see_pass_button);
         }
@@ -91,7 +111,9 @@ class PasswordInput {
         // У поля сообщение скрыто по умолчанию (`display: none`) — показываем анимацией
         new Animation(this.#error_message_password).fadeIn();
     }
-    set() { return this.#chui_password_input; }
+    set() {
+        return this.#chui_password_input;
+    }
     /** Значок кнопки: узел помечается скрытым — имя кнопки даёт `aria-label`, а не лигатура */
     #setSeeGlyph(button = new HTMLElement(), icon = String(), color = String()) {
         const glyph = new Icon(icon, undefined, color).set();
@@ -119,4 +141,4 @@ class PasswordInput {
     }
 }
 
-exports.PasswordInput = PasswordInput
+exports.PasswordInput = PasswordInput;

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

@@ -48,7 +48,7 @@ see_pass_button {
     margin: 0;
     display: inline-flex;
     justify-content: center;
-    align-items: center
+    align-items: center;
 }
 
 .password_label {
@@ -56,8 +56,8 @@ see_pass_button {
     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);
 }
 
 .error_border {
@@ -70,8 +70,8 @@ error_message_password {
     width: max-content;
     margin: var(--margin) var(--margin) 0 var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--red_prime_background)
+    font-weight: 500;
+    color: var(--red_prime_background);
 }
 
 /* DISABLED STYLES */
@@ -87,8 +87,8 @@ error_message_password {
     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);
 }
 
 .password_input_disabled {
@@ -101,4 +101,4 @@ error_message_password {
     text-align: start;
     border: none;
     font-size: var(--font_default_size);
-}
+}

package/framework/components/chui_inputs/chui_radio_button/radio_button.js

@@ -1,28 +1,30 @@
 class RadioButton {
     #id = require("randomstring").generate();
-    #radioButton = document.createElement('radiobutton');
-    #input = document.createElement('input');
-    #label = document.createElement('label');
-    constructor(options = {
-        name: String(),
-        title: String(),
-        stringValue: String(),
-        value: Boolean(),
-        required: Boolean(),
-        width: String()
-    }) {
-        const {setStyles, optionOr} = require('../../../modules/chui_functions');
-        setStyles(__dirname + "/styles.css", 'chUiJS_RadioButton');
-        this.#radioButton.style.getPropertyValue('display')
-        this.#input.classList.add('radiobutton');
-        this.#input.type = 'radio';
-        this.#input.classList.add('radiobutton_input');
+    #radioButton = document.createElement("radiobutton");
+    #input = document.createElement("input");
+    #label = document.createElement("label");
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            stringValue: String(),
+            value: Boolean(),
+            required: Boolean(),
+            width: String(),
+        }
+    ) {
+        const { setStyles, optionOr } = require("../../../modules/chui_functions");
+        setStyles(__dirname + "/styles.css", "chUiJS_RadioButton");
+        this.#radioButton.style.getPropertyValue("display");
+        this.#input.classList.add("radiobutton");
+        this.#input.type = "radio";
+        this.#input.classList.add("radiobutton_input");
         this.#input.id = this.#id;
         // Пустая заготовка опции равносильна отсутствующей: иначе в value и подписи попадало «undefined»
         this.#input.value = optionOr(options.stringValue, "");
         if (optionOr(options.title, undefined) !== undefined) this.#label.innerText = options.title;
-        this.#label.setAttribute('for', this.#id);
-        this.#label.classList.add('labelr')
+        this.#label.setAttribute("for", this.#id);
+        this.#label.classList.add("labelr");
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.value !== undefined) this.#input.checked = options.value;
         if (options.required !== undefined) this.#input.required = options.required;
@@ -33,11 +35,21 @@ class RadioButton {
             }
         }
     }
-    getName() { return this.#input.name; }
-    getValue() { return this.#input.checked; }
-    setValue(value = Boolean()) { this.#input.checked = value; }
-    addChangeListener(listener) { this.#input.addEventListener('change', listener); }
-    setDisabled(boolean = Boolean()) { this.#input.disabled = boolean; }
+    getName() {
+        return this.#input.name;
+    }
+    getValue() {
+        return this.#input.checked;
+    }
+    setValue(value = Boolean()) {
+        this.#input.checked = value;
+    }
+    addChangeListener(listener) {
+        this.#input.addEventListener("change", listener);
+    }
+    setDisabled(boolean = Boolean()) {
+        this.#input.disabled = boolean;
+    }
     set() {
         this.#radioButton.appendChild(this.#input);
         this.#radioButton.appendChild(this.#label);
@@ -45,4 +57,4 @@ class RadioButton {
     }
 }
 
-exports.RadioButton = RadioButton
+exports.RadioButton = RadioButton;