wj-elements 0.1.183 → 0.1.185

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

@@ -1,9 +1,9 @@
-import { default as WJElement } from '../wje-element/element.js';
+import { FormAssociatedElement } from '../internals/form-associated-element.js';
 /**
  * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.
  * @documentation https://elements.webjet.sk/components/input
  * @status stable
- * @augments WJElement
+ * @augments {FormAssociatedElement}
  * @csspart native - The native part.
  * @csspart wrapper - The wrapper part.
  * @csspart input - The input part.
@@ -25,7 +25,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * // @fires wje-input:input - Dispatched when the input value changes.
  * // @fires wje-input:clear - Dispatched when the input is cleared.
  */
-export default class Input extends WJElement {
+export default class Input extends FormAssociatedElement {
     /**
      * Getter for the cssStyleSheet attribute.
      * @returns {CSSStyleSheet} The CSS style sheet of the input element.
@@ -36,26 +36,7 @@ export default class Input extends WJElement {
      * @returns {Array} The attributes to observe for changes.
      */
     static get observedAttributes(): any[];
-    /**
-     * Whether the input is associated with a form.
-     * @type {boolean}
-     */
-    static formAssociated: boolean;
-    /**
-     * Sets or removes the 'invalid' attribute on an element based on the provided value.
-     * @param {boolean} value If true, the 'invalid' attribute is set. If false, the 'invalid' attribute is removed.
-     */
-    set invalid(value: boolean);
-    /**
-     * Gets the value of the 'invalid' attribute.
-     * Determines whether the 'invalid' attribute is present on the element.
-     * @returns {boolean} True if the 'invalid' attribute is present, otherwise false.
-     */
-    get invalid(): boolean;
     pristine: boolean;
-    internals: ElementInternals;
-    observer: MutationObserver;
-    observeFunction: (mutations: any) => void;
     /**
      * Setter for the value attribute.
      * @param {string} value The value to set.
@@ -103,31 +84,6 @@ export default class Input extends WJElement {
      * @returns {boolean} Whether the attribute is present.
      */
     get validateOnChange(): 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 element.
-     */
-    get name(): 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 element.
-     */
-    get validationMessage(): string;
-    /**
-     * Getter for the willValidate attribute.
-     * @returns {boolean} Whether the input will be validated.
-     */
-    get willValidate(): boolean;
     /**
      * @summary Setter for the defaultValue attribute.
      * This method sets the 'value' attribute of the custom input element to the provided value.
@@ -179,7 +135,6 @@ export default class Input extends WJElement {
      * @returns {string} The value of the 'variant' attribute or 'default' if not set.
      */
     get variant(): string;
-    beforeDraw(): void;
     /**
      * Draws the input element.
      * @returns {DocumentFragment} The drawn input.
@@ -194,29 +149,6 @@ export default class Input extends WJElement {
      * Runs after the input is drawn to the DOM.
      */
     afterDraw(): void;
-    /**
-     * @summary Displays the validation message for the input.
-     * If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.
-     * If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.
-     */
-    showInvalidMessage(): void;
-    /**
-     * @summary Validates the input.
-     * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.
-     * For each invalid state, it constructs an attribute name and checks if the input has this attribute.
-     * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.
-     * If the input does not have the attribute, it sets the error message to the default validation message of the input.
-     * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.
-     * If the input is valid, it sets the validity in the form internals to an empty object.
-     */
-    validateInput(): void;
-    validationError: string;
-    /**
-     * Checks and updates the validation state of the component based on its current properties.
-     * If the component is invalid and a custom error display is enabled, it dispatches an 'invalid' event.
-     * @returns {void} This method does not return a value.
-     */
-    propagateValidation(): void;
     /**
      * Checks whether the input has a slot.
      * @param {HTMLElement} el The element to check.
@@ -224,39 +156,4 @@ export default class Input extends WJElement {
      * @returns {boolean} Whether the input has the slot.
      */
     hasSlot(el: HTMLElement, slotName?: string): boolean;
-    /**
-     * @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;
 }

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

@@ -3,20 +3,23 @@ import { default as Option } from '../wje-option/option.js';
 import { default as InfiniteScroll } from '../wje-infinite-scroll/infinite-scroll.js';
 import { default as List } from '../wje-list/list.js';
 /**
- * `Options` is a custom web component that represents a set of options.
- * It extends from `WJElement`.
+ * `Options` is a custom web component that represents a set of options. It extends from `WJElement`.
  * @summary This element represents a set of options.
  * @documentation https://elements.webjet.sk/components/options
  * @status stable
- * @augments {WJElement}
- * // @fires wje-options:load - Event fired when the options are loaded.
  * @tag wje-options
  */
 export default class Options extends WJElement {
     /**
-     * Returns the list of attributes to observe for changes.
+     * Returns the CSS styles for the component.
      * @static
-     * @returns {Array<string>}
+     * @returns {CSSStyleSheet} The CSS styles for the component.
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Retrieves an array of attributes that should be observed for changes.
+     * The method returns a list of attribute names that the browser will monitor for changes.
+     * @returns {Array<string>} An array of attribute names to observe.
      */
     static get observedAttributes(): Array<string>;
     dependencies: {
@@ -156,6 +159,10 @@ export default class Options extends WJElement {
      * @type {Array}
      */
     get loadedOptions(): any[];
+    /**
+     * Sets the elements that are preloaded and ready to be drawn.
+     * @param {Array|object} elements The elements to be set for preloading. This can be an array or a specific object containing drawable elements.
+     */
     private set drawPreloadedElements(elements);
     /**
      * Array of preloaded elements.
@@ -163,11 +170,6 @@ export default class Options extends WJElement {
      * @private
      */
     private get drawPreloadedElements();
-    /**
-     * Prepares the component before drawing.
-     * Fetches the pages and creates the options elements.
-     */
-    afterDraw(): void;
     /**
      * Draws the component.
      * @returns {DocumentFragment}
@@ -175,18 +177,20 @@ export default class Options extends WJElement {
     draw(): DocumentFragment;
     infiniteScroll: HTMLElement;
     response: any;
+    afterDraw(): void;
+    dispatchOptionsLoadEvent: (e: any) => void;
     /**
-     * Processes the given data and returns the options based on the option array path.
-     * @param {any} data The data to be processed.
-     * @returns {any} - The options based on the option array path.
+     * Processes the provided data based on the optional array path set in the instance.
+     * @param {object} data The input data to be processed.
+     * @returns {Array} The resolved options array from the data or an empty array if no match is found.
      */
-    processData(data: any): any;
+    processData(data: object): any[];
     /**
-     * Filters out drawn options from the response.
-     * @param {object | null} response The response to filter.
-     * @returns {object} The filtered response.
+     * Filters out options from the response object that have already been drawn, based on the specified option array path.
+     * @param {object} response The response object containing data to process.
+     * @returns {object} The filtered response object with drawn options removed.
      */
-    filterOutDrawnOptions(response: object | null): object;
+    filterOutDrawnOptions(response: object): object;
     /**
      * Recursively updates the object based on the provided path to the property.
      * @param {object | Array | null} object

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

@@ -21,7 +21,15 @@ export default class Popup extends WJElement {
      * @returns {CSSStyleSheet} The CSS styles for the component.
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
     _manual: boolean;
+    set loader(value: boolean);
+    get loader(): boolean;
     /**
      * Sets the manual property of the popup.
      * @param {boolean} value The value to set.
@@ -41,6 +49,7 @@ export default class Popup extends WJElement {
     slotAnchor: HTMLSlotElement;
     slotArrow: HTMLSlotElement;
     native: HTMLDivElement;
+    loaderEl: HTMLDivElement;
     /**
      * After Draws the component.
      */
@@ -81,4 +90,5 @@ export default class Popup extends WJElement {
      * Removes the active attribute when the popup is hidden.
      */
     handleHide: () => void;
+    markContentReady(): void;
 }

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

@@ -24,7 +24,8 @@ export default class Radio extends WJElement {
      * @returns {Array<string>}
      */
     static get observedAttributes(): Array<string>;
-    _checked: boolean;
+    set value(value: string);
+    get value(): string;
     /**
      * Sets the name of the radio button.
      * @param value
@@ -35,6 +36,16 @@ export default class Radio extends WJElement {
      * @returns {boolean}
      */
     get checked(): 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;
     /**
      * Draws the radio button.
      * @returns {DocumentFragment}

package/dist/packages/wje-radio-group/radio-group.element.d.ts

@@ -1,27 +1,23 @@
-import { default as WJElement } from '../wje-element/element.js';
+import { FormAssociatedElement } from '../internals/form-associated-element.js';
 import { default as Radio } from '../wje-radio/radio.js';
 /**
  * `RadioGroup` is a custom web component that represents a group of radio buttons.
  * @summary This element represents a group of radio buttons.
  * @documentation https://elements.webjet.sk/components/radio-group
  * @status stable
- * @augments {WJElement}
+ * @augments {FormAssociatedElement}
  * @slot - The default slot for the radio group.
  * @tag wje-radio-group
  */
-export default class RadioGroup extends WJElement {
+export default class RadioGroup extends FormAssociatedElement {
     /**
      * Returns the CSS styles for the component.
      * @static
      * @returns {CSSStyleSheet}
      */
     static get cssStyleSheet(): CSSStyleSheet;
-    /**
-     * Whether the input is associated with a form.
-     * @type {boolean}
-     */
-    static formAssociated: boolean;
-    internals: ElementInternals;
+    static get observedAttributes(): any[];
+    pristine: boolean;
     /**
      * Setter for the value attribute.
      * @param {string} value The value to set.
@@ -32,56 +28,12 @@ export default class RadioGroup extends WJElement {
      * @returns {string} The value of the attribute.
      */
     get value(): string;
-    /**
-     * 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;
-    /**
-     * @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: string);
-    /**
-     * @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(): string;
     /**
      * Draws the component for the radio group.
      * @returns {DocumentFragment}
      */
     draw(): DocumentFragment;
+    input: HTMLInputElement;
     /**
      * Adds event listeners after the component is drawn. Handles the selection of radio buttons.
      */
@@ -99,45 +51,11 @@ export default class RadioGroup extends WJElement {
     /**
      * Sets the given radio button to checked.
      */
-    checkRadio(value: any): boolean;
+    checkRadio(radio: any): boolean;
     /**
      * Retrieves all direct child elements of the current element.
      * @returns {HTMLElement[]} An array of child elements.
      */
     getAllElements(): HTMLElement[];
-    /**
-     * @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-select/select.d.ts

@@ -1,2 +1,2 @@
-import { default as Select } from './select.element.js';
+import { Select } from './select.element.js';
 export default Select;