wj-elements 0.1.97 → 0.1.99

package/dist/wje-checkbox.js

@@ -16,6 +16,113 @@ class Checkbox extends WJElement {
      * The class name.
      */
     __publicField(this, "className", "Checkbox");
+    this.internals = this.attachInternals();
+  }
+  /**
+   * Setter for the value attribute.
+   * @param {string} value - The value to set.
+   */
+  set value(value) {
+    this.internals.setFormValue(value);
+    if (this.input)
+      this.input.value = value;
+  }
+  /**
+   * Getter for the value attribute.
+   * @returns {string} The value of the attribute.
+   */
+  get value() {
+    var _a;
+    return ((_a = this.input) == null ? void 0 : _a.value) || "";
+  }
+  /**
+       * Getter for the customErrorDisplay attribute.
+       * @returns {boolean} Whether the attribute is present.
+       */
+  get customErrorDisplay() {
+    return this.hasAttribute("custom-error-display");
+  }
+  /**
+   * Getter for the validateOnChange attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get validateOnChange() {
+    return this.hasAttribute("validate-on-change");
+  }
+  /**
+   * Getter for the invalid attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get invalid() {
+    return this.hasAttribute("invalid");
+  }
+  /**
+   * Setter for the invalid attribute.
+   * @param {boolean} isInvalid - Whether the input is invalid.
+   */
+  set invalid(isInvalid) {
+    isInvalid ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
+  }
+  /**
+   * Getter for the form attribute.
+   * @returns {HTMLFormElement} The form the input is associated with.
+   */
+  get form() {
+    return this.internals.form;
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string} The name of the input.
+   */
+  get name() {
+    return this.getAttribute("name");
+  }
+  /**
+   * Getter for the type attribute.
+   * @returns {string} The type of the input.
+   */
+  get type() {
+    return this.localName;
+  }
+  /**
+   * Getter for the validity attribute.
+   * @returns {ValidityState} The validity state of the input.
+   */
+  get validity() {
+    return this.internals.validity;
+  }
+  /**
+   * Getter for the validationMessage attribute.
+   * @returns {string} The validation message of the input.
+   */
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  /**
+   * Getter for the willValidate attribute.
+   * @returns {boolean} Whether the input will be validated.
+   */
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  /**
+   * @summary Getter for the defaultValue attribute.
+   * This method retrieves the 'value' attribute of the custom input element.
+   * The 'value' attribute represents the default value of the input element.
+   * If the 'value' attribute is not set, it returns an empty string.
+   * @returns {string} The default value of the input element.
+   */
+  get defaultValue() {
+    return this.getAttribute("value") ?? "";
+  }
+  /**
+   * @summary Setter for the defaultValue attribute.
+   * This method sets the 'value' attribute of the custom input element to the provided value.
+   * The 'value' attribute represents the default value of the input element.
+   * @param {string} value - The value to set as the default value.
+   */
+  set defaultValue(value) {
+    this.setAttribute("value", value);
   }
   /**
    * @summary Set checked attribute
@@ -59,7 +166,7 @@ class Checkbox extends WJElement {
     return styles;
   }
   static get observedAttributes() {
-    return ["checked", "disabled"];
+    return ["checked", "disabled", "value"];
   }
   /**
    * Sets up the attributes for the checkbox.
@@ -101,10 +208,12 @@ class Checkbox extends WJElement {
   afterDraw() {
     if (!this.disabled) {
       this.input.addEventListener("input", (e) => {
+        this.value = e.target.checked;
         this.checked = e.target.checked;
         event.dispatchCustomEvent(this, "wje-toggle:input");
       });
       this.input.addEventListener("change", (e) => {
+        this.value = e.target.checked;
         this.checked = e.target.checked;
         event.dispatchCustomEvent(this, "wje-toggle:change");
       });
@@ -116,7 +225,68 @@ class Checkbox extends WJElement {
   disconnectedCallback() {
     event.removeElement(this.input);
   }
+  /**
+   * @summary Callback function that is called when the custom element is associated with a form.
+   * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
+   * @param {HTMLFormElement} form - The form the custom element is associated with.
+   */
+  formAssociatedCallback(form) {
+    form.addEventListener("submit", () => {
+    });
+  }
+  /**
+   * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
+   * This method is responsible for resetting the value of the custom input element to its default value.
+   * It also resets the form value and validity state in the form internals.
+   *
+   * @method
+   */
+  formResetCallback() {
+    this.value = this.defaultValue;
+    this.internals.setFormValue(this.defaultValue);
+    this.internals.setValidity({});
+  }
+  /**
+   * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
+   * This method is responsible for restoring the value of the custom input element to its saved state.
+   * It also restores the form value and validity state in the form internals to their saved states.
+   *
+   * @param {Object} state - The saved state of the custom input element.
+   * @method
+   */
+  formStateRestoreCallback(state) {
+    this.value = state.value;
+    this.internals.setFormValue(state.value);
+    this.internals.setValidity({});
+  }
+  /**
+   * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
+   * This method is responsible for saving the value of the custom input element.
+   *
+   * @returns {Object} The saved state of the custom input element.
+   * @method
+   */
+  formStateSaveCallback() {
+    return {
+      value: this.value
+    };
+  }
+  /**
+   * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
+   * This method is not implemented yet.
+   *
+   * @param {boolean} disabled - The new disabled state of the custom input element.
+   * @method
+   */
+  formDisabledCallback(disabled) {
+    console.warn("formDisabledCallback not implemented yet");
+  }
 }
+/**
+ * Whether the input is associated with a form.
+ * @type {boolean}
+ */
+__publicField(Checkbox, "formAssociated", true);
 WJElement.define("wje-checkbox", Checkbox);
 export {
   Checkbox as default

package/dist/wje-routerx.js

@@ -1526,7 +1526,10 @@ class Routerx extends WJElement {
       const attributeName = attributes[i].name;
       const attributeValue = attributes[i].value;
       if (attributeName === "component" && attributeValue.indexOf(".js") > -1) {
-        obj.component = () => import(attributeValue);
+        obj.component = () => import(
+          /*vite-ignore*/
+          attributeValue
+        );
       } else {
         if (attributeName !== "shadow") {
           const camelCase = attributeName.replace(/-([a-z])/g, (g) => g[1].toUpperCase());

package/dist/wje-select.js

@@ -66,6 +66,110 @@ class Select extends WJElement {
     });
     this._selected = [];
     this.counterEl = null;
+    this.internals = this.attachInternals();
+  }
+  /**
+   * Setter for the value attribute.
+   * @param {string} value - The value to set.
+   */
+  set value(value) {
+    this.internals.setFormValue(JSON.stringify(value));
+  }
+  /**
+   * Getter for the value attribute.
+   * @returns {string} The value of the attribute.
+   */
+  get value() {
+    return this.selected;
+  }
+  /**
+       * Getter for the customErrorDisplay attribute.
+       * @returns {boolean} Whether the attribute is present.
+       */
+  get customErrorDisplay() {
+    return this.hasAttribute("custom-error-display");
+  }
+  /**
+   * Getter for the validateOnChange attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get validateOnChange() {
+    return this.hasAttribute("validate-on-change");
+  }
+  /**
+   * Getter for the invalid attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get invalid() {
+    return this.hasAttribute("invalid");
+  }
+  /**
+   * Setter for the invalid attribute.
+   * @param {boolean} isInvalid - Whether the input is invalid.
+   */
+  set invalid(isInvalid) {
+    isInvalid ? this.setAttribute("invalid", "") : this.removeAttribute("invalid");
+  }
+  /**
+   * Getter for the form attribute.
+   * @returns {HTMLFormElement} The form the input is associated with.
+   */
+  get form() {
+    return this.internals.form;
+  }
+  /**
+   * Getter for the name attribute.
+   * @returns {string} The name of the input.
+   */
+  get name() {
+    return this.getAttribute("name");
+  }
+  /**
+   * Getter for the type attribute.
+   * @returns {string} The type of the input.
+   */
+  get type() {
+    return this.localName;
+  }
+  /**
+   * Getter for the validity attribute.
+   * @returns {ValidityState} The validity state of the input.
+   */
+  get validity() {
+    return this.internals.validity;
+  }
+  /**
+   * Getter for the validationMessage attribute.
+   * @returns {string} The validation message of the input.
+   */
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  /**
+   * Getter for the willValidate attribute.
+   * @returns {boolean} Whether the input will be validated.
+   */
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  /**
+   * @summary Getter for the defaultValue attribute.
+   * This method retrieves the 'value' attribute of the custom input element.
+   * The 'value' attribute represents the default value of the input element.
+   * If the 'value' attribute is not set, it returns an empty string.
+   * @returns {string} The default value of the input element.
+   */
+  get defaultValue() {
+    return this.getAttribute("value") ?? "";
+  }
+  /**
+   * @summary Setter for the defaultValue attribute.
+   * This method sets the 'value' attribute of the custom input element to the provided value.
+   * The 'value' attribute represents the default value of the input element.
+   * @param {string} value - The value to set as the default value.
+   */
+  set defaultValue(value) {
+    this.setAttribute("value", value);
   }
   /**
    * Sets the selected value.
@@ -305,8 +409,9 @@ class Select extends WJElement {
    * @param {number} length - The length of the selected options.
    */
   selectionChanged(option = null, length = 0) {
+    var _a, _b;
     if (this.hasAttribute("multiple")) {
-      this.value = this.selectedOptions.map((el) => el).reverse();
+      this.value = this.selectedOptions.map((el) => el.value).reverse();
       if (this.placeholder && length === 0) {
         this.chips.innerHTML = this.placeholder;
         this.input.value = "";
@@ -320,7 +425,7 @@ class Select extends WJElement {
       }
     } else {
       let value = (option == null ? void 0 : option.textContent.trim()) || "";
-      this.value = value;
+      this.value = (_b = (_a = this.selectedOptions) == null ? void 0 : _a.map((el) => el.value)) == null ? void 0 : _b.at(0);
       this.input.value = value;
       if (option && option instanceof HTMLElement) {
         this.slotStart.innerHTML = "";
@@ -386,7 +491,68 @@ class Select extends WJElement {
     chip.appendChild(label);
     return chip;
   }
+  /**
+   * @summary Callback function that is called when the custom element is associated with a form.
+   * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
+   * @param {HTMLFormElement} form - The form the custom element is associated with.
+   */
+  formAssociatedCallback(form) {
+    form.addEventListener("submit", () => {
+    });
+  }
+  /**
+   * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
+   * This method is responsible for resetting the value of the custom input element to its default value.
+   * It also resets the form value and validity state in the form internals.
+   *
+   * @method
+   */
+  formResetCallback() {
+    this.value = this.defaultValue;
+    this.internals.setFormValue(this.defaultValue);
+    this.internals.setValidity({});
+  }
+  /**
+   * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
+   * This method is responsible for restoring the value of the custom input element to its saved state.
+   * It also restores the form value and validity state in the form internals to their saved states.
+   *
+   * @param {Object} state - The saved state of the custom input element.
+   * @method
+   */
+  formStateRestoreCallback(state) {
+    this.value = state.value;
+    this.internals.setFormValue(state.value);
+    this.internals.setValidity({});
+  }
+  /**
+   * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
+   * This method is responsible for saving the value of the custom input element.
+   *
+   * @returns {Object} The saved state of the custom input element.
+   * @method
+   */
+  formStateSaveCallback() {
+    return {
+      value: this.value
+    };
+  }
+  /**
+   * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
+   * This method is not implemented yet.
+   *
+   * @param {boolean} disabled - The new disabled state of the custom input element.
+   * @method
+   */
+  formDisabledCallback(disabled) {
+    console.warn("formDisabledCallback not implemented yet");
+  }
 }
+/**
+ * Whether the input is associated with a form.
+ * @type {boolean}
+ */
+__publicField(Select, "formAssociated", true);
 Select.define("wje-select", Select);
 export {
   Select as default

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.97",
+  "version": "0.1.99",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",