wj-elements 0.1.184 → 0.1.186

package/dist/form-associated-element-CaIxmEod.js

@@ -0,0 +1,242 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import WJElement from "./wje-element.js";
+import { event } from "./event.js";
+class FormAssociatedElement extends WJElement {
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+  }
+  /**
+   * Sets the 'name' attribute to the given value.
+   * @param {string} value The new value for the 'name' attribute.
+   */
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  /**
+   * 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() {
+    console.log("LOCAL NAME", this.localName, this.getAttribute("type"));
+    return this.getAttribute("type");
+  }
+  /**
+   * Sets or removes the 'required' attribute on the element.
+   * @param {boolean} value If true, adds the 'required' attribute. If false, removes the 'required' attribute.
+   */
+  set required(value) {
+    if (value) {
+      this.setAttribute("required", "");
+    } else {
+      this.removeAttribute("required");
+    }
+  }
+  /**
+   * Checks if the 'required' attribute is present on the element.
+   * @returns {boolean} `true` if the 'required' attribute is set, otherwise `false`.
+   */
+  get required() {
+    return this.hasAttribute("required");
+  }
+  /**
+   * Setter for the invalid attribute.
+   * @param {boolean} isInvalid Whether the input is invalid.
+   */
+  set invalid(isInvalid) {
+    if (isInvalid) this.setAttribute("invalid", "");
+    else this.removeAttribute("invalid");
+  }
+  /**
+   * Getter for the invalid attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get invalid() {
+    return this.hasAttribute("invalid");
+  }
+  /**
+   * Set checked attribute.
+   * @param {boolean} value true if the toggle is checked, false otherwise
+   */
+  set disabled(value) {
+    if (value) {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
+  /**
+   * Get disabled attribute value.
+   * @returns {boolean} true if the toggle is disabled, false otherwise
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * Retrieves the form element associated with this object.
+   * @returns {HTMLFormElement|null} The associated form element, or null if there isn't one.
+   */
+  get form() {
+    return this.internals.form;
+  }
+  /**
+   * Retrieves the validity state of the element by returning the validity object from the internal element.
+   * The validity object provides information on whether the element satisfies its validation constraints.
+   * @returns {ValidityState} The validity state object representing the element's validation constraints.
+   */
+  get validity() {
+    return this.internals.validity;
+  }
+  /**
+   * Retrieves the current validation message associated with the element.
+   * @returns {string} The validation message that describes why the element's value fails validity checks.
+   */
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  /**
+   * Indicates whether the element is a candidate for constraint validation.
+   * @returns {boolean} Returns true if the element will be validated during constraint validation, false otherwise.
+   */
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  /**
+   * Validates the input element associated with the component and updates its validity state
+   * and error messages based on the user's input and the current validation rules.
+   * @returns {void} This method does not return a value. It modifies the validity state
+   * internally and sets appropriate validation messages.
+   */
+  validate() {
+    const validState = this.input.validity;
+    if (!validState.valid) {
+      for (let state in validState) {
+        const attr = `message-${state.toString()}`;
+        if (validState[state]) {
+          this.validationError = state.toString();
+          let errorMessage = this.message;
+          if (!this.hasAttribute("message"))
+            errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;
+          this.internals.setValidity({ [this.validationError]: true }, errorMessage, this.input);
+        }
+      }
+    } else {
+      this.internals.setValidity({});
+    }
+  }
+  /**
+   * Propagates a validation event based on the validity state of the component.
+   *
+   * This method checks the validity status of the component and emits a custom
+   * event if the component is invalid. The event's name and additional details
+   * can be specified.
+   * @param {string} [eventName] The name of the event to dispatch when the component is invalid.
+   * @param {object} [detail] Additional detail to include in the dispatched event.
+   * @returns {void} This method does not return a value.
+   */
+  propagateValidation(eventName = "invalid", detail = {}) {
+    const internals = this.internals;
+    this.invalid = !this.pristine && !internals.validity.valid;
+    if (this.invalid) {
+      event.dispatchCustomEvent(this, this.tagName.toLocaleLowerCase() + ":" + eventName, detail);
+    }
+  }
+  /**
+   * Displays an invalid message for the current element.
+   * If an error message element does not exist within the designated slot,
+   * it creates one and appends it to the slot. Updates the text content
+   * of the error message element with the validation message from the
+   * element's internals.
+   * @returns {void} This method does not return any value.
+   */
+  showInvalidMessage() {
+    const internals = this.internals;
+    const slot = this.querySelector("[slot='error']");
+    let errorMessageEl = slot == null ? void 0 : slot.querySelector("[error-message]");
+    if (!errorMessageEl) {
+      const error = document.createElement("div");
+      error.setAttribute("error-message", "");
+      slot == null ? void 0 : slot.append(error);
+      errorMessageEl = error;
+    }
+    errorMessageEl.textContent = internals.validationMessage;
+  }
+  checkValidity() {
+    this.validate();
+    return this.internals.checkValidity();
+  }
+  /**
+   * Callback to handle the reset action for a form.
+   * Resets the value of the form control to its default value, updates the form value, and clears any validity states.
+   * @returns {void} Does not return a value.
+   */
+  formResetCallback() {
+    this.value = this.defaultValue;
+    this.internals.setFormValue(this.defaultValue);
+    this.internals.setValidity({});
+  }
+  /**
+   * Restores the form state by assigning the provided state value
+   * and updating the internal form value and validity.
+   * @param {object} state The state object containing the value to restore the form.
+   * @param {*} state.value The value to set for the form element.
+   * @returns {void} This method does not return any value.
+   */
+  formStateRestoreCallback(state) {
+    this.value = state.value;
+    this.internals.setFormValue(state.value);
+    this.internals.setValidity({});
+  }
+  /**
+   * Callback method to save the current state of a form.
+   * This method captures and returns the form's value property.
+   * @returns {object} An object containing the `value` property of the current form state.
+   */
+  formStateSaveCallback() {
+    return {
+      value: this.value
+    };
+  }
+  /**
+   * Toggles the disabled state of the component and updates corresponding attributes.
+   * @param {boolean} disabled Indicates whether the form should be marked as disabled.
+   * If true, the 'disabled' class is added, and the 'disabled' attribute is set.
+   * If false, both the class and attribute are removed.
+   * @returns {void}
+   */
+  formDisabledCallback(disabled) {
+    var _a;
+    (_a = this.native) == null ? void 0 : _a.classList.toggle("disabled", disabled);
+    this.toggleAttribute("disabled", disabled);
+  }
+  /**
+   * A lifecycle callback that is executed when the element is associated with a form.
+   * It updates the form's value field with the element's value and sets up an event
+   * listener to perform validation and propagate it whenever the form is submitted.
+   * @returns {void} Does not return any value.
+   */
+  formAssociatedCallback() {
+    var _a;
+    if (this.form) {
+      this.internals.setFormValue(this.value);
+      (_a = this.form) == null ? void 0 : _a.addEventListener("submit", () => {
+        this.validate();
+        this.propagateValidation();
+      });
+    }
+  }
+}
+__publicField(FormAssociatedElement, "formAssociated", true);
+export {
+  FormAssociatedElement as F
+};
+//# sourceMappingURL=form-associated-element-CaIxmEod.js.map

package/dist/form-associated-element-CaIxmEod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-element-CaIxmEod.js","sources":["../packages/internals/form-associated-element.js"],"sourcesContent":["import { default as WJElement, event } from \"../wje-element/element.js\";\n\nexport class FormAssociatedElement extends WJElement {\n  static formAssociated = true;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  /**\n   * Sets the 'name' attribute to the given value.\n   * @param {string} value The new value for the 'name' attribute.\n   */\n  set name(value) {\n    this.setAttribute('name', value);\n  }\n\n  /**\n   * Getter for the name attribute.\n   * @returns {string} The name of the input.\n   */\n  get name() {\n    return this.getAttribute('name');\n  }\n\n  /**\n   * Getter for the type attribute.\n   * @returns {string} The type of the input.\n   */\n  get type() {\n    console.log('LOCAL NAME', this.localName, this.getAttribute(\"type\"));\n    return this.getAttribute(\"type\");\n  }\n\n  /**\n   * Sets or removes the 'required' attribute on the element.\n   * @param {boolean} value If true, adds the 'required' attribute. If false, removes the 'required' attribute.\n   */\n  set required(value) {\n    if (value) {\n      this.setAttribute('required', '');\n    } else {\n      this.removeAttribute('required');\n    }\n  }\n\n  /**\n   * Checks if the 'required' attribute is present on the element.\n   * @returns {boolean} `true` if the 'required' attribute is set, otherwise `false`.\n   */\n  get required() {\n    return this.hasAttribute('required');\n  }\n\n  /**\n   * Setter for the invalid attribute.\n   * @param {boolean} isInvalid Whether the input is invalid.\n   */\n  set invalid(isInvalid) {\n    if (isInvalid) this.setAttribute('invalid', '');\n    else this.removeAttribute('invalid');\n  }\n\n  /**\n   * Getter for the invalid attribute.\n   * @returns {boolean} Whether the attribute is present.\n   */\n  get invalid() {\n    return this.hasAttribute('invalid');\n  }\n\n  /**\n   * Set checked attribute.\n   * @param {boolean} value true if the toggle is checked, false otherwise\n   */\n  set disabled(value) {\n    if (value) {\n      this.setAttribute('disabled', '');\n    } else {\n      this.removeAttribute('disabled');\n    }\n  }\n\n  /**\n   * Get disabled attribute value.\n   * @returns {boolean} true if the toggle is disabled, false otherwise\n   */\n  get disabled() {\n    return this.hasAttribute('disabled');\n  }\n\n  /**\n   * Retrieves the form element associated with this object.\n   * @returns {HTMLFormElement|null} The associated form element, or null if there isn't one.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * Retrieves the validity state of the element by returning the validity object from the internal element.\n   * The validity object provides information on whether the element satisfies its validation constraints.\n   * @returns {ValidityState} The validity state object representing the element's validation constraints.\n   */\n  get validity() {\n    return this.internals.validity;\n  }\n\n  /**\n   * Retrieves the current validation message associated with the element.\n   * @returns {string} The validation message that describes why the element's value fails validity checks.\n   */\n  get validationMessage() {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * Indicates whether the element is a candidate for constraint validation.\n   * @returns {boolean} Returns true if the element will be validated during constraint validation, false otherwise.\n   */\n  get willValidate() {\n    return this.internals.willValidate;\n  }\n\n  /**\n   * Validates the input element associated with the component and updates its validity state\n   * and error messages based on the user's input and the current validation rules.\n   * @returns {void} This method does not return a value. It modifies the validity state\n   * internally and sets appropriate validation messages.\n   */\n  validate() {\n    const validState = this.input.validity;\n\n    if (!validState.valid) {\n      for (let state in validState) {\n        const attr = `message-${state.toString()}`;\n\n        if (validState[state]) {\n          this.validationError = state.toString();\n          let errorMessage = this.message;\n\n          // TODO this take error messages based on lang from operating system of user  should we implement custom translations based on app language ?\n          if (!this.hasAttribute('message'))\n            errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n          this.internals.setValidity({ [this.validationError]: true }, errorMessage, this.input);\n        }\n      }\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  /**\n   * Propagates a validation event based on the validity state of the component.\n   *\n   * This method checks the validity status of the component and emits a custom\n   * event if the component is invalid. The event's name and additional details\n   * can be specified.\n   * @param {string} [eventName] The name of the event to dispatch when the component is invalid.\n   * @param {object} [detail] Additional detail to include in the dispatched event.\n   * @returns {void} This method does not return a value.\n   */\n  propagateValidation(eventName = 'invalid', detail = {}) {\n    const internals = this.internals;\n\n    this.invalid = !this.pristine && !internals.validity.valid;\n\n    if (this.invalid) {\n      event.dispatchCustomEvent(this, this.tagName.toLocaleLowerCase() + ':' + eventName, detail);\n    }\n  }\n\n  /**\n   * Displays an invalid message for the current element.\n   * If an error message element does not exist within the designated slot,\n   * it creates one and appends it to the slot. Updates the text content\n   * of the error message element with the validation message from the\n   * element's internals.\n   * @returns {void} This method does not return any value.\n   */\n  showInvalidMessage() {\n    const internals = this.internals;\n    const slot = this.querySelector(\"[slot='error']\");\n    let errorMessageEl = slot?.querySelector('[error-message]');\n\n    if (!errorMessageEl) {\n      const error = document.createElement('div');\n      error.setAttribute('error-message', '');\n      slot?.append(error);\n      errorMessageEl = error;\n    }\n\n    errorMessageEl.textContent = internals.validationMessage;\n  }\n\n  checkValidity() {\n    // zavolá tvoju vlastnú validáciu pred kontrolou internals\n    this.validate();\n    return this.internals.checkValidity();\n  }\n\n  /**\n   * Callback to handle the reset action for a form.\n   * Resets the value of the form control to its default value, updates the form value, and clears any validity states.\n   * @returns {void} Does not return a value.\n   */\n  formResetCallback() {\n    this.value = this.defaultValue;\n    this.internals.setFormValue(this.defaultValue);\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Restores the form state by assigning the provided state value\n   * and updating the internal form value and validity.\n   * @param {object} state The state object containing the value to restore the form.\n   * @param {*} state.value The value to set for the form element.\n   * @returns {void} This method does not return any value.\n   */\n  formStateRestoreCallback(state) {\n    this.value = state.value;\n    this.internals.setFormValue(state.value);\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Callback method to save the current state of a form.\n   * This method captures and returns the form's value property.\n   * @returns {object} An object containing the `value` property of the current form state.\n   */\n  formStateSaveCallback() {\n    return {\n      value: this.value\n    };\n  }\n\n  /**\n   * Toggles the disabled state of the component and updates corresponding attributes.\n   * @param {boolean} disabled Indicates whether the form should be marked as disabled.\n   * If true, the 'disabled' class is added, and the 'disabled' attribute is set.\n   * If false, both the class and attribute are removed.\n   * @returns {void}\n   */\n  formDisabledCallback(disabled) {\n    this.native?.classList.toggle('disabled', disabled);\n    this.toggleAttribute('disabled', disabled);\n  }\n\n  /**\n   * A lifecycle callback that is executed when the element is associated with a form.\n   * It updates the form's value field with the element's value and sets up an event\n   * listener to perform validation and propagate it whenever the form is submitted.\n   * @returns {void} Does not return any value.\n   */\n  formAssociatedCallback() {\n    if (this.form) {\n      this.internals.setFormValue(this.value);\n      this.form?.addEventListener('submit', () => {\n        this.validate();\n        this.propagateValidation();\n      });\n    }\n  }\n}"],"names":[],"mappings":"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"}

package/dist/light.css

@@ -366,7 +366,7 @@
     /* Infinite Scroll */
     --wje-infinite-scroll-width: 100%;
     --wje-infinite-scroll-height: 300px;
-    --wje-infinite-scroll-loading-bg: rgba(0, 0, 0, 0);
+    --wje-infinite-scroll-loading-bg: rgba(255, 255, 255, 1);
 
     /* Img - Comparer */
     --wje-img-compare-divider-area: 12px;
@@ -511,11 +511,11 @@
     --wje-select-border-width: 1px;
     --wje-select-border-style: solid;
     --wje-select-border-color: var(--wje-border-color);
-    --wje-select-border-radius: var(--wje-border-radius-medium) var(--wje-border-radius-medium) 0 0;
+    --wje-select-border-radius: var(--wje-border-radius-medium) var(--wje-border-radius-medium);
     --wje-select-options-border-width: 1px;
     --wje-select-options-border-style: var(--wje-border-style);
     --wje-select-options-border-color: var(--wje-border-color);
-    --wje-select-options-border-radius: 0 0 var(--wje-border-radius-medium) var(--wje-border-radius-medium);
+    --wje-select-options-border-radius: var(--wje-border-radius-medium);
     --wje-select-background: var(--wje-color-contrast-0);
     --wje-select-line-height: 20px;
     --wje-select-color: var(--wje-color);

package/dist/packages/internals/form-associated-element.d.ts

@@ -0,0 +1,138 @@
+import { default as WJElement } from '../wje-element/element.js';
+export class FormAssociatedElement extends WJElement {
+    static formAssociated: boolean;
+    internals: ElementInternals;
+    /**
+     * Sets the 'name' attribute to the given value.
+     * @param {string} value The new value for the 'name' attribute.
+     */
+    set name(value: string);
+    /**
+     * Getter for the name attribute.
+     * @returns {string} The name of the input.
+     */
+    get name(): string;
+    /**
+     * Getter for the type attribute.
+     * @returns {string} The type of the input.
+     */
+    get type(): string;
+    /**
+     * Sets or removes the 'required' attribute on the element.
+     * @param {boolean} value If true, adds the 'required' attribute. If false, removes the 'required' attribute.
+     */
+    set required(value: boolean);
+    /**
+     * Checks if the 'required' attribute is present on the element.
+     * @returns {boolean} `true` if the 'required' attribute is set, otherwise `false`.
+     */
+    get required(): boolean;
+    /**
+     * Setter for the invalid attribute.
+     * @param {boolean} isInvalid Whether the input is invalid.
+     */
+    set invalid(isInvalid: boolean);
+    /**
+     * Getter for the invalid attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get invalid(): boolean;
+    /**
+     * Set checked attribute.
+     * @param {boolean} value true if the toggle is checked, false otherwise
+     */
+    set disabled(value: boolean);
+    /**
+     * Get disabled attribute value.
+     * @returns {boolean} true if the toggle is disabled, false otherwise
+     */
+    get disabled(): boolean;
+    /**
+     * Retrieves the form element associated with this object.
+     * @returns {HTMLFormElement|null} The associated form element, or null if there isn't one.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Retrieves the validity state of the element by returning the validity object from the internal element.
+     * The validity object provides information on whether the element satisfies its validation constraints.
+     * @returns {ValidityState} The validity state object representing the element's validation constraints.
+     */
+    get validity(): ValidityState;
+    /**
+     * Retrieves the current validation message associated with the element.
+     * @returns {string} The validation message that describes why the element's value fails validity checks.
+     */
+    get validationMessage(): string;
+    /**
+     * Indicates whether the element is a candidate for constraint validation.
+     * @returns {boolean} Returns true if the element will be validated during constraint validation, false otherwise.
+     */
+    get willValidate(): boolean;
+    /**
+     * Validates the input element associated with the component and updates its validity state
+     * and error messages based on the user's input and the current validation rules.
+     * @returns {void} This method does not return a value. It modifies the validity state
+     * internally and sets appropriate validation messages.
+     */
+    validate(): void;
+    validationError: string;
+    /**
+     * Propagates a validation event based on the validity state of the component.
+     *
+     * This method checks the validity status of the component and emits a custom
+     * event if the component is invalid. The event's name and additional details
+     * can be specified.
+     * @param {string} [eventName] The name of the event to dispatch when the component is invalid.
+     * @param {object} [detail] Additional detail to include in the dispatched event.
+     * @returns {void} This method does not return a value.
+     */
+    propagateValidation(eventName?: string, detail?: object): void;
+    /**
+     * Displays an invalid message for the current element.
+     * If an error message element does not exist within the designated slot,
+     * it creates one and appends it to the slot. Updates the text content
+     * of the error message element with the validation message from the
+     * element's internals.
+     * @returns {void} This method does not return any value.
+     */
+    showInvalidMessage(): void;
+    checkValidity(): boolean;
+    /**
+     * Callback to handle the reset action for a form.
+     * Resets the value of the form control to its default value, updates the form value, and clears any validity states.
+     * @returns {void} Does not return a value.
+     */
+    formResetCallback(): void;
+    value: any;
+    /**
+     * Restores the form state by assigning the provided state value
+     * and updating the internal form value and validity.
+     * @param {object} state The state object containing the value to restore the form.
+     * @param {*} state.value The value to set for the form element.
+     * @returns {void} This method does not return any value.
+     */
+    formStateRestoreCallback(state: {
+        value: any;
+    }): void;
+    /**
+     * Callback method to save the current state of a form.
+     * This method captures and returns the form's value property.
+     * @returns {object} An object containing the `value` property of the current form state.
+     */
+    formStateSaveCallback(): object;
+    /**
+     * Toggles the disabled state of the component and updates corresponding attributes.
+     * @param {boolean} disabled Indicates whether the form should be marked as disabled.
+     * If true, the 'disabled' class is added, and the 'disabled' attribute is set.
+     * If false, both the class and attribute are removed.
+     * @returns {void}
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * A lifecycle callback that is executed when the element is associated with a form.
+     * It updates the form's value field with the element's value and sets up an event
+     * listener to perform validation and propagate it whenever the form is submitted.
+     * @returns {void} Does not return any value.
+     */
+    formAssociatedCallback(): void;
+}

package/dist/packages/wje-checkbox/checkbox.element.d.ts

@@ -1,11 +1,11 @@
-import { default as WJElement } from '../wje-element/element.js';
+import { FormAssociatedElement } from '../internals/form-associated-element.js';
 /**
  * @summary This method dispatches a custom event named "wje-checkbox:change".
  * It is triggered when the input event is fired, which happens when the state of the checkbox changes.
  * The event is dispatched on the current instance of the Checkbox class.
  * @documentation https://elements.webjet.sk/components/checkbox
  * @status stable
- * @augments WJElement
+ * @augments {FormAssociatedElement}
  * @slot - The checkbox main content.
  * @csspart native - The component's native wrapper.
  * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;
@@ -15,19 +15,14 @@ import { default as WJElement } from '../wje-element/element.js';
  * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;
  * //@fires wje-checkbox:change - Dispatched when the checkbox state changes;
  */
-export default class Checkbox extends WJElement {
+export default class Checkbox extends FormAssociatedElement {
     /**
      * Getter for the CSS stylesheet.
      * @returns {string} The CSS stylesheet.
      */
     static get cssStyleSheet(): string;
     static get observedAttributes(): string[];
-    /**
-     * Whether the input is associated with a form.
-     * @type {boolean}
-     */
-    static formAssociated: boolean;
-    internals: ElementInternals;
+    pristine: boolean;
     /**
      * Setter for the value attribute.
      * @param {string} value The value to set.
@@ -48,46 +43,6 @@ export default class Checkbox extends WJElement {
      * @returns {boolean} Whether the attribute is present.
      */
     get validateOnChange(): boolean;
-    /**
-     * Setter for the invalid attribute.
-     * @param {boolean} isInvalid Whether the input is invalid.
-     */
-    set invalid(isInvalid: boolean);
-    /**
-     * Getter for the invalid attribute.
-     * @returns {boolean} Whether the attribute is present.
-     */
-    get invalid(): boolean;
-    /**
-     * Getter for the form attribute.
-     * @returns {HTMLFormElement} The form the input is associated with.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * Getter for the name attribute.
-     * @returns {string} The name of the input.
-     */
-    get name(): string;
-    /**
-     * Getter for the type attribute.
-     * @returns {string} The type of the input.
-     */
-    get type(): string;
-    /**
-     * Getter for the validity attribute.
-     * @returns {ValidityState} The validity state of the input.
-     */
-    get validity(): ValidityState;
-    /**
-     * Getter for the validationMessage attribute.
-     * @returns {string} The validation message of the input.
-     */
-    get validationMessage(): string;
-    /**
-     * Getter for the willValidate attribute.
-     * @returns {boolean} Whether the input will be validated.
-     */
-    get willValidate(): boolean;
     /**
      * Setter for the defaultValue attribute.
      * This method sets the 'value' attribute of the custom input element to the provided value.
@@ -104,15 +59,22 @@ export default class Checkbox extends WJElement {
      */
     get defaultValue(): string;
     /**
-     * Set checked attribute.
-     * @param {boolean} value true if the toggle is checked, false otherwise
+     * Sets or removes the 'indeterminate' attribute for the object.
+     * This property typically reflects the visual or functional state where
+     * the component is neither fully active nor inactive.
+     * @param {boolean} value A boolean where `true` indicates the 'indeterminate'
+     * state should be set, and `false` removes it.
      */
-    set disabled(value: boolean);
+    set indeterminate(value: boolean);
     /**
-     * Get disabled attribute value.
-     * @returns {boolean} true if the toggle is disabled, false otherwise
+     * Retrieves the current state of the 'indeterminate' attribute.
+     *
+     * The 'indeterminate' attribute is typically used to signify a state
+     * where a checkbox is neither checked nor unchecked, such as a partially
+     * selected state.
+     * @returns {boolean} Returns true if the 'indeterminate' attribute is present; otherwise, false.
      */
-    get disabled(): boolean;
+    get indeterminate(): boolean;
     /**
      * Set checked attribute.
      * @param {boolean} value true if the toggle is checked, false otherwise
@@ -133,40 +95,5 @@ export default class Checkbox extends WJElement {
      * Adds an event listener after drawing the checkbox.
      */
     afterDraw(): void;
-    /**
-     * @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: HTMLFormElement): void;
-    /**
-     * 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.
-     * @function
-     */
-    formResetCallback(): void;
-    /**
-     * 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.
-     * @function
-     */
-    formStateRestoreCallback(state: object): void;
-    /**
-     * 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.
-     * @function
-     */
-    formStateSaveCallback(): object;
-    /**
-     * 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.
-     * @function
-     */
-    formDisabledCallback(disabled: boolean): void;
     #private;
 }

package/dist/packages/wje-infinite-scroll/infinite-scroll.element.d.ts

@@ -29,6 +29,7 @@ export default class InfiniteScroll extends WJElement {
     totalPages: number;
     isLoading: any[];
     iterate: Element;
+    placementObj: this;
     /**
      * Dependencies of the InfiniteScroll component.
      * @param value
@@ -138,7 +139,6 @@ export default class InfiniteScroll extends WJElement {
      */
     loadPages(page: number): Promise<void>;
     parser: DOMParser;
-    placementObj: any;
     compareFunction: (i: any, item: any) => boolean;
     /**
      * Converts a data item into an HTML element based on a template.