chuijs 3.6.2 → 3.6.4

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

@@ -1,85 +1,85 @@
-chui_number_input {
-    display: flex;
-    flex-direction: column;
-    width: 200px;
-    height: max-content;
-    margin: var(--margin);
-}
-
-number_main {
-    display: flex;
-    width: -webkit-fill-available;
-    height: max-content;
-    margin: 0;
-    border-radius: var(--border_radius);
-    align-items: center;
-    position: relative;
-    padding: var(--test_padding) 43px;
-    background: var(--element_background);
-    border: 1px solid var(--border_color);
-}
-
-.number_buttons {
-    cursor: pointer;
-    height: -webkit-fill-available;
-    width: 43px;
-    margin: 0;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    color: var(--badge_cancel_text);
-}
-
-input[type=number]::-webkit-inner-spin-button {
-    -webkit-appearance: none
-}
-
-.number_input {
-    width: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--text_color);
-    text-align: center;
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-.number_label {
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
-}
-
-/* DISABLED STYLES */
-.number_main_disabled {
-    cursor: not-allowed;
-    background: var(--element_background_disabled);
-    border: 1px solid var(--border_color);
-}
-
-.number_label_disabled {
-    cursor: not-allowed;
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color_disabled)
-}
-
-.number_input_disabled {
-    cursor: not-allowed;
-    width: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--text_color_disabled);
-    text-align: center;
-    border: none;
-    font-size: var(--font_default_size);
+chui_number_input {
+    display: flex;
+    flex-direction: column;
+    width: var(--control_width);
+    height: max-content;
+    margin: var(--margin);
+}
+
+number_main {
+    display: flex;
+    width: -webkit-fill-available;
+    height: max-content;
+    margin: 0;
+    border-radius: var(--border_radius);
+    align-items: center;
+    position: relative;
+    padding: var(--test_padding) 43px;
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+}
+
+.number_buttons {
+    cursor: pointer;
+    height: -webkit-fill-available;
+    width: 43px;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    color: var(--badge_cancel_text);
+}
+
+input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none
+}
+
+.number_input {
+    width: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--text_color);
+    text-align: center;
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+.number_label {
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color)
+}
+
+/* DISABLED STYLES */
+.number_main_disabled {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    border: 1px solid var(--border_color);
+}
+
+.number_label_disabled {
+    cursor: not-allowed;
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color_disabled)
+}
+
+.number_input_disabled {
+    cursor: not-allowed;
+    width: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--text_color_disabled);
+    text-align: center;
+    border: none;
+    font-size: var(--font_default_size);
 }

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

@@ -1,99 +1,99 @@
-const { Icon, Icons } = require('../../chui_icons/icons');
-const {Animation} = require("../../../modules/chui_animations/animations");
-
-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');
-    #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');
-        this.#title = options.title;
-        this.#input.type = 'password';
-        this.#input.id = this.#id;
-        if (options.name !== undefined) this.#input.name = options.name;
-        this.#input.className = 'password_input';
-        if (options.required !== undefined) this.#input.required = options.required;
-        this.#see_pass_button.innerHTML = new Icon(Icons.ACTIONS.VISIBILITY, undefined, "var(--blue_prime_background)").getHTML();
-        this.#see_pass_button_disabled.innerHTML = new Icon(Icons.ACTIONS.VISIBILITY, undefined, "var(--text_color_disabled)").getHTML();
-        this.#see_pass_button_disabled.style.cursor = "not-allowed";
-        if (options.title !== undefined) {
-            this.#label.innerText = options.title;
-            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;
-        if (options.width !== undefined) this.#chui_password_input.style.width = options.width;
-        this.#input.addEventListener('focus', () => {
-            this.#password_main.style.border = '1px solid var(--blue_prime_background)';
-            this.#label.style.color = 'var(--blue_prime_background)';
-        })
-        this.#input.addEventListener('blur', () => {
-            this.#password_main.removeAttribute('style');
-            this.#label.removeAttribute('style');
-        })
-
-        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.#chui_password_input.appendChild(this.#password_main);
-
-        //
-        this.#input.addEventListener("input", () => {
-            this.#password_main.classList.remove("error_border");
-            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; }
-    setDisabled(boolean = 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.#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.#see_pass_button_disabled.remove();
-            this.#password_main.appendChild(this.#see_pass_button);
-        }
-    }
-    setErrorMessage(message = String()) {
-        this.#password_main.classList.add("error_border");
-        this.#error_message_password.innerText = message;
-        this.#chui_password_input.appendChild(this.#error_message_password);
-        new Animation(this.#error_message_password).fadeIn();
-    }
-    set() { return this.#chui_password_input; }
-    #showPassword() {
-        this.#input.focus();
-        if (this.#input.type === "password") {
-            this.#see_pass_button.innerHTML = new Icon(Icons.ACTIONS.VISIBILITY_OFF, undefined, "var(--blue_prime_background)").getHTML();
-            this.#input.type = "text";
-        } else {
-            this.#see_pass_button.innerHTML = new Icon(Icons.ACTIONS.VISIBILITY, undefined, "var(--blue_prime_background)").getHTML();
-            this.#input.type = "password";
-        }
-    }
-}
-
-exports.PasswordInput = PasswordInput
+const { Icon, Icons } = require('../../chui_icons/icons');
+const {Animation} = require("../../../modules/chui_animations/animations");
+
+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');
+    #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');
+        this.#title = options.title;
+        this.#input.type = 'password';
+        this.#input.id = this.#id;
+        if (options.name !== undefined) this.#input.name = options.name;
+        this.#input.className = 'password_input';
+        if (options.required !== undefined) this.#input.required = options.required;
+        this.#see_pass_button.innerHTML = new Icon(Icons.ACTIONS.VISIBILITY, undefined, "var(--blue_prime_background)").getHTML();
+        this.#see_pass_button_disabled.innerHTML = new Icon(Icons.ACTIONS.VISIBILITY, undefined, "var(--text_color_disabled)").getHTML();
+        this.#see_pass_button_disabled.style.cursor = "not-allowed";
+        if (options.title !== undefined) {
+            this.#label.innerText = options.title;
+            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;
+        if (options.width !== undefined) this.#chui_password_input.style.width = options.width;
+        this.#input.addEventListener('focus', () => {
+            this.#password_main.style.border = '1px solid var(--blue_prime_background)';
+            this.#label.style.color = 'var(--blue_prime_background)';
+        })
+        this.#input.addEventListener('blur', () => {
+            this.#password_main.removeAttribute('style');
+            this.#label.removeAttribute('style');
+        })
+
+        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.#chui_password_input.appendChild(this.#password_main);
+
+        //
+        this.#input.addEventListener("input", () => {
+            this.#password_main.classList.remove("error_border");
+            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; }
+    setDisabled(boolean = 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.#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.#see_pass_button_disabled.remove();
+            this.#password_main.appendChild(this.#see_pass_button);
+        }
+    }
+    setErrorMessage(message = String()) {
+        this.#password_main.classList.add("error_border");
+        this.#error_message_password.innerText = message;
+        this.#chui_password_input.appendChild(this.#error_message_password);
+        new Animation(this.#error_message_password).fadeIn();
+    }
+    set() { return this.#chui_password_input; }
+    #showPassword() {
+        this.#input.focus();
+        if (this.#input.type === "password") {
+            this.#see_pass_button.innerHTML = new Icon(Icons.ACTIONS.VISIBILITY_OFF, undefined, "var(--blue_prime_background)").getHTML();
+            this.#input.type = "text";
+        } else {
+            this.#see_pass_button.innerHTML = new Icon(Icons.ACTIONS.VISIBILITY, undefined, "var(--blue_prime_background)").getHTML();
+            this.#input.type = "password";
+        }
+    }
+}
+
+exports.PasswordInput = PasswordInput

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

@@ -1,98 +1,98 @@
-chui_password_input {
-    display: flex;
-    flex-direction: column;
-    width: 200px;
-    height: max-content;
-    margin: var(--margin);
-}
-
-password_main {
-    display: flex;
-    outline: none;
-    width: -webkit-fill-available;
-    height: max-content;
-    border-radius: var(--border_radius);
-    font-size: var(--font_default_size);
-    color: var(--text_color);
-    position: relative;
-    padding: var(--test_padding) 43px var(--main_padding);
-    background: var(--element_background);
-    border: 1px solid var(--border_color);
-}
-
-.password_input {
-    width: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--text_color);
-    text-align: start;
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-see_pass_button {
-    cursor: pointer;
-    position: absolute;
-    color: var(--badge_cancel_text);
-    right: 0;
-    top: 0;
-    height: -webkit-fill-available;
-    width: 43px;
-    margin: 0;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center
-}
-
-.password_label {
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
-}
-
-.error_border {
-    border: none;
-}
-
-error_message_password {
-    display: none;
-    height: max-content;
-    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)
-}
-
-/* DISABLED STYLES */
-.password_main_disabled {
-    cursor: not-allowed;
-    background: var(--element_background_disabled);
-    border: 1px solid var(--border_color);
-}
-
-.password_label_disabled {
-    cursor: not-allowed;
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color_disabled)
-}
-
-.password_input_disabled {
-    cursor: not-allowed;
-    width: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--text_color_disabled);
-    text-align: start;
-    border: none;
-    font-size: var(--font_default_size);
+chui_password_input {
+    display: flex;
+    flex-direction: column;
+    width: var(--control_width);
+    height: max-content;
+    margin: var(--margin);
+}
+
+password_main {
+    display: flex;
+    outline: none;
+    width: -webkit-fill-available;
+    height: max-content;
+    border-radius: var(--border_radius);
+    font-size: var(--font_default_size);
+    color: var(--text_color);
+    position: relative;
+    padding: var(--test_padding) 43px var(--main_padding);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+}
+
+.password_input {
+    width: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--text_color);
+    text-align: start;
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+see_pass_button {
+    cursor: pointer;
+    position: absolute;
+    color: var(--badge_cancel_text);
+    right: 0;
+    top: 0;
+    height: -webkit-fill-available;
+    width: 43px;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center
+}
+
+.password_label {
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color)
+}
+
+.error_border {
+    border: 1px solid var(--red_prime_background);
+}
+
+error_message_password {
+    display: none;
+    height: max-content;
+    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)
+}
+
+/* DISABLED STYLES */
+.password_main_disabled {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    border: 1px solid var(--border_color);
+}
+
+.password_label_disabled {
+    cursor: not-allowed;
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color_disabled)
+}
+
+.password_input_disabled {
+    cursor: not-allowed;
+    width: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--text_color_disabled);
+    text-align: start;
+    border: none;
+    font-size: var(--font_default_size);
 }

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

@@ -1,46 +1,46 @@
-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()
-    }) {
-        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;
-        this.#input.value = options.stringValue;
-        this.#label.innerText = options.title;
-        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;
-        if (options.width !== undefined) {
-            this.#radioButton.style.width = options.width;
-            if (options.width === "-webkit-fill-available") {
-                this.#label.style.width = options.width;
-            }
-        }
-    }
-    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);
-        return this.#radioButton;
-    }
-}
-
+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()
+    }) {
+        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;
+        this.#input.value = options.stringValue;
+        this.#label.innerText = options.title;
+        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;
+        if (options.width !== undefined) {
+            this.#radioButton.style.width = options.width;
+            if (options.width === "-webkit-fill-available") {
+                this.#label.style.width = options.width;
+            }
+        }
+    }
+    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);
+        return this.#radioButton;
+    }
+}
+
 exports.RadioButton = RadioButton