wj-elements 0.2.0-alpha.9 → 0.3.0-alpha.1

package/dist/packages/wje-color-picker/color-picker.element.d.ts

@@ -15,6 +15,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @csspart alpha - The alpha slider part of the color picker.
  * @csspart color-preview - The color preview part of the color picker.
  * @csspart input - The input part of the color picker.
+ * @attribute {boolean} input-editable - Enables manual color typing into the input field.
  * @cssproperty [--wje-color-picker-area] - The color of the color area background.
  * @cssproperty [--wje-color-picker-value] - The value of the color picker input.
  * @cssproperty [--wje-color-picker-swatch] - The color of the color swatch button.
@@ -46,6 +47,13 @@ export default class ColorPicker extends WJElement {
      * @private
      */
     private _swatches;
+    /**
+     * Stores last raw value typed by user in editable input.
+     * Used to avoid aggressive normalization while typing.
+     * @type {string|null}
+     * @private
+     */
+    private _manualInputValue;
     /**
      * Sets the color attribute of the element.
      * @param {string} value The color value to be set. It should be a valid color string such as a named color, HEX, RGB, or HSL format.
@@ -76,6 +84,13 @@ export default class ColorPicker extends WJElement {
      * @returns {Array} The current color swatches.
      */
     get swatches(): any[];
+    /**
+     * Normalizes swatch colors from a string to an array.
+     * Supports comma and semicolon separators.
+     * @param {string} value
+     * @returns {string[]}
+     */
+    parseSwatches(value?: string): string[];
     /**
      * Sets or removes the 'no-color-area' attribute based on the provided value.
      * @param {boolean} value A boolean value indicating whether to set or remove the 'no-color-area' attribute. If true, the attribute is added; if false, the attribute is removed.
@@ -108,6 +123,16 @@ export default class ColorPicker extends WJElement {
      * @returns {boolean} Returns true if the 'no-swatches' attribute is present; otherwise, false.
      */
     get noSwatches(): boolean;
+    /**
+     * Enables/disables manual typing in the input.
+     * @param {boolean} value
+     */
+    set inputEditable(value: boolean);
+    /**
+     * Returns true when manual input typing is enabled.
+     * @returns {boolean}
+     */
+    get inputEditable(): boolean;
     /**
      * Creates and returns a document fragment containing the structure and components of a custom color picker.
      * The method initializes DOM elements such as divs, sliders, and inputs, with specific classes and attributes,
@@ -174,6 +199,16 @@ export default class ColorPicker extends WJElement {
      * @param y
      */
     setMarkerPosition(x: any, y: any): void;
+    /**
+     * Clamps marker coordinates to the color area boundaries.
+     * @param {number} x
+     * @param {number} y
+     * @returns {{x: number, y: number}}
+     */
+    clampMarkerPosition(x: number, y: number): {
+        x: number;
+        y: number;
+    };
     /**
      * Sets the color at the given position.
      * @param x
@@ -194,7 +229,7 @@ export default class ColorPicker extends WJElement {
     /**
      * Updates the color picker's current color and its associated UI elements.
      * @param {tinycolor.Instance|null} [color] The color value to set. If null, the current value from the input field is used.
-     * @param {string} [type] The type of action determining which UI element to update. Possible values: "marker", "hue", "alpha", "swatch".
+     * @param {string} [type] The type of action determining which UI element to update. Possible values: "marker", "hue", "alpha", "swatch", "input".
      */
     setColor: (color?: tinycolor.Instance | null, type?: string) => void;
     value: {
@@ -226,5 +261,12 @@ export default class ColorPicker extends WJElement {
      * @returns {string} - The HSVA color string in the format `hsva(h, 100%, 100%, a)`.
      */
     getHSVA: (hue: number, alpha: number) => string;
+    /**
+     * Returns fully saturated and bright color for the current hue.
+     * Used as base color for the SV area so neutral grays do not black out the palette.
+     * @param {string} color
+     * @returns {string}
+     */
+    getHueAreaColor(color?: string): string;
     #private;
 }

package/dist/packages/wje-copy-button/copy-button.element.d.ts

@@ -49,6 +49,10 @@ export default class CopyButton extends WJElement {
      * Adds event listeners for the click, focus, and blur events.
      */
     afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Handles the click event.
      * @param {Event} e The event object.

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

@@ -21,6 +21,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @tag wje-dialog
  */
 export default class Dialog extends WJElement {
+    static _instanceId: number;
     /**
      * Returns the CSS styles for the component.
      * @returns {*}
@@ -31,6 +32,7 @@ export default class Dialog extends WJElement {
      * @returns {*[]}
      */
     static get observedAttributes(): any[];
+    _instanceId: number;
     /**
      * Sets the value of the 'headline' attribute.
      * @param {string} value The new value for the 'headline' attribute.

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

@@ -14,11 +14,13 @@ import { default as Popup } from '../wje-popup/popup.element.js';
  * @tag wje-dropdown
  */
 export default class Dropdown extends WJElement {
+    static _instanceId: number;
     /**
      * Getter for the CSS stylesheet.
      * @returns {string[]}
      */
     static get observedAttributes(): string[];
+    _instanceId: number;
     /**
      * The placement of the dropdown.
      * @type {{"wje-popup": Popup}}
@@ -74,6 +76,7 @@ export default class Dropdown extends WJElement {
      * Adds event listeners for the mouseenter and mouseleave events.
      */
     afterDraw(): void;
+    onSlotChange: () => void;
     popupHideCallback: (e: any) => void;
     /**
      * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.
@@ -104,5 +107,9 @@ export default class Dropdown extends WJElement {
     beforeClose: () => void;
     afterClose: () => void;
     onClose: () => void;
+    /**
+     * Syncs ARIA attributes for the trigger element.
+     */
+    syncAria(): void;
     #private;
 }

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

@@ -18,6 +18,7 @@ export default class WJElement extends HTMLElement {
      * @param [options] Additional options for defining the element.
      */
     static define(name: any, elementConstructor?: typeof WJElement, options?: {}): void;
+    internals: ElementInternals;
     service: UniversalService;
     _dependencies: {};
     /**
@@ -121,6 +122,18 @@ export default class WJElement extends HTMLElement {
      * @returns {object} The store instance.
      */
     get store(): object;
+    /**
+     * Returns ElementInternals when available.
+     * @returns {ElementInternals|null}
+     */
+    getInternals(): ElementInternals | null;
+    /**
+     * Sets ARIA state via attributes.
+     * Accepts camelCase keys without the "aria" prefix, plus "role".
+     * Example: setAriaState({ role: 'tab', selected: true, controls: 'panel-1' })
+     * @param {object} state
+     */
+    setAriaState(state?: object): void;
     /**
      * @typedef {object} ArrayActions
      * @property {Function} addAction - Adds an item to the array.
@@ -185,25 +198,6 @@ export default class WJElement extends HTMLElement {
      * }
      */
     draw(context: any, appStoreObj: any, params: any): any;
-    /**
-     * Renders the component within the provided context.
-     * @param context The rendering context, usually the element's shadow root or main DOM element.
-     * @param appStore The global application store for managing state.
-     * @param params Additional parameters or attributes for rendering the component.
-     * @returns This implementation does not render anything and returns `null`.
-     * @description
-     * The `draw` method is responsible for rendering the component's content.
-     * Override this method in subclasses to define custom rendering logic.
-     * @example
-     * class MyComponent extends WJElement {
-     *   draw(context, appStore, params) {
-     *     const div = document.createElement('div');
-     *     div.textContent = 'Hello, world!';
-     *     context.appendChild(div);
-     *   }
-     * }
-     */
-    draw(context: any, appStore: any, params: any): any;
     /**
      * Hook for extending behavior after drawing the component.
      * @param context The rendering context, usually the element's shadow root or main DOM element.
@@ -217,18 +211,29 @@ export default class WJElement extends HTMLElement {
      * Return: string | Node | DocumentFragment | null | Promise of those.
      */
     renderSkeleton(params: any): any;
-    set skeletonDelay(value: number);
+    /**
+     * Sets the delay for the skeleton loading indicator.
+     * @param {string|number|null|undefined} value The delay value to be set. Accepts a numerical value,
+     * a string that can be converted to a number, null, or undefined.
+     * If null or undefined is provided, the skeleton delay will be cleared.
+     */
+    set skeletonDelay(value: string | number | null | undefined);
     /**
      * Retrieves the delay duration for the skeleton display, determining the value based on a hierarchy of overrides and defaults.
      * The method prioritizes in the following order:
-     * 1. A finite number set as the `_wjSkeletonSlotClone` property.
+     * 1. A finite number set as the `_wjSkeletonDelayOverride` property.
      * 2. A valid numeric value from the `skeleton-delay` attribute.
      * 3. The `skeletonDelayMs` property, if defined with a finite number.
      * 4. A default value of 150 if none of the above are set.
      * @returns {number} The delay in milliseconds before the skeleton is displayed.
      */
     get skeletonDelay(): number;
-    set skeletonMinDuration(value: number);
+    /**
+     * Sets the minimum duration for the skeleton state. If the provided value is null, undefined, or an empty string,
+     * the override for the minimum duration is removed.
+     * @param {string|number|null|undefined} value The minimum duration to be set for the skeleton state. It can be a numeric value, string representation of a number, or null/undefined to reset the value.
+     */
+    set skeletonMinDuration(value: string | number | null | undefined);
     /**
      * Retrieves the minimum duration for the skeleton animation.
      * The method checks for an internally stored finite value. If unavailable,
@@ -238,9 +243,22 @@ export default class WJElement extends HTMLElement {
      * @returns {number} The minimum duration for the skeleton animation in milliseconds.
      */
     get skeletonMinDuration(): number;
-    _wjSkeletonSlotClone: number | Node;
+    _wjSkeletonMinDurationOverride: number;
+    /**
+     * Sets or removes the 'skeleton' attribute based on the provided value.
+     * @param {boolean} value A boolean value indicating whether to set ('true') or remove ('false') the 'skeleton' attribute.
+     */
     set skeleton(value: boolean);
+    /**
+     * Checks if the 'skeleton' attribute is present on the element.
+     * @returns {boolean} True if the 'skeleton' attribute exists, false otherwise.
+     */
     get skeleton(): boolean;
+    _wjSkeletonDelayOverride: number;
+    /**
+     * Retrieves the delay value used for skeleton loading.
+     * @returns {number} The delay value for the skeleton loader.
+     */
     get skeletonDelayValue(): number;
     /**
      * Lifecycle method invoked when the component is connected to the DOM.
@@ -286,7 +304,17 @@ export default class WJElement extends HTMLElement {
      * @param newName The new value of the attribute.
      */
     attributeChangedCallback(name: any, old: any, newName: any): void;
+    /**
+     * Triggers a refresh operation by initializing the update lifecycle and setting up promises
+     * to track its completion or failure status. Marks the instance as not pristine and queues
+     * an update.
+     * @returns {void} Does not return a value.
+     */
     refresh(): void;
+    /**
+     * Stops the current render loop if it is running by canceling the requestAnimationFrame.
+     * @returns {void} This method does not return a value.
+     */
     stopRenderLoop(): void;
     /**
      * Displays the component's content, optionally forcing a re-render.
@@ -332,7 +360,10 @@ export default class WJElement extends HTMLElement {
      */
     checkGetterSetter(obj: object, property: string): object;
     /**
-     * Sets up property accessors for the component's attributes.
+     * Sets up accessors (getter and setter) for all attributes of the current object.
+     * This method retrieves the attribute names, sanitizes them, and dynamically defines
+     * property accessors for each attribute using `Object.defineProperty`.
+     * @returns {void} This method does not return any value.
      */
     setUpAccessors(): void;
     #private;

package/dist/packages/wje-file-upload/file-upload.element.d.ts

@@ -131,6 +131,17 @@ export default class FileUpload extends WJElement {
      * @returns {number} The maximum number of files allowed.
      */
     get maxFiles(): number;
+    /**
+     * Sets the label attribute for the upload button.
+     * @param {string} value
+     */
+    set label(value: string);
+    /**
+     * Gets the label attribute for the upload button.
+     * @returns {string}
+     */
+    get label(): string;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     beforeDraw(): void;
     uploadFunction: Function;
     /**
@@ -148,19 +159,19 @@ export default class FileUpload extends WJElement {
     afterDraw(): void;
     /**
      * Method to handle form submission.
-     * @param {Event} event The form submission event.
+     * @param {Event} e The form submission event.
      */
-    handleSubmit(event: Event): void;
+    handleSubmit(e: Event): void;
     /**
      * Method to handle file drop event.
-     * @param {Event} event The file drop event object.
+     * @param {Event} e The file drop event object.
      */
-    handleDrop: (event: Event) => void;
+    handleDrop: (e: Event) => void;
     /**
      * Method to handle file input change event.
-     * @param {Event} event The file input change event object.
+     * @param {Event} e The file input change event object.
      */
-    handleInputChange: (event: Event) => void;
+    handleInputChange: (e: Event) => void;
     /**
      * Method to add files to the queue.
      * @param files

package/dist/packages/wje-file-upload/service/service.d.ts

@@ -7,29 +7,6 @@
  * getFileTypeIcon('folder'); // Returns 'folder'.
  */
 export function getFileTypeIcon(type: string): string;
-/**
- * Checks if a given file matches any of the accepted file types.
- * @param {File} file The file to validate.
- * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.
- * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.
- * @throws {Error} Throws an error if `acceptedFileTypes` is empty.
- * @example
- * const file = new File([""], "example.png", { type: "image/png" });
- * const isValid = isValidFileType(file, "image/*,application/pdf");
- * console.log(isValid); // true
- * @example
- * const file = new File([""], "example.txt", { type: "text/plain" });
- * const isValid = isValidFileType(file, ["text/plain", "application/json"]);
- * console.log(isValid); // true
- */
-export function isValidFileType(file: File, acceptedFileTypes: string | string[]): boolean;
-/**
- * Uploads a file in chunks using `XMLHttpRequest`, allowing for progress tracking.
- * @param {File} file The file to be uploaded.
- * @param {number} chunkSize The size of each chunk in bytes.
- * @param {HTMLElement} preview The element used to display upload progress.
- */
-export function uploadFile(file: File, chunkSize: number, preview: HTMLElement): void;
 /**
  * Returns a function for uploading files either in chunks or as a whole file, based on the provided options.
  * @param {string} url The URL to which the file will be uploaded.

package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts

@@ -74,10 +74,15 @@ export default class FileUploadItem extends WJElement {
     button: HTMLElement;
     uploadedEl: HTMLElement;
     sliderEl: HTMLElement;
+    nameEl: HTMLSpanElement;
     /**
      * Called after the component has been drawn.
      */
     afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host and actions.
+     */
+    syncAria(): void;
     /**
      * Handles the delete action.
      */

package/dist/packages/wje-format-digital/format-digital.element.d.ts

@@ -67,6 +67,7 @@ export default class FormatDigital extends WJElement {
      * @returns {string} - The current unit display style.
      */
     get unitDisplay(): string;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Prepares the component before rendering.
      * Computes the formatted value based on the input value and unit.
@@ -80,4 +81,5 @@ export default class FormatDigital extends WJElement {
      * @returns {DocumentFragment} - The DOM structure for the component.
      */
     draw(): DocumentFragment;
+    formatted: HTMLSpanElement;
 }

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

@@ -37,4 +37,15 @@ export default class Icon extends WJElement {
      * Called after the component has been drawn.
      */
     afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
+    /**
+     * Handles attribute changes for ARIA sync.
+     * @param {string} name
+     * @param {string|null} oldValue
+     * @param {string|null} newValue
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/dist/packages/wje-icon-picker/icon-picker.element.d.ts

@@ -101,6 +101,10 @@ export default class IconPicker extends WJElement {
      */
     afterDraw(): void;
     init: boolean;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Handles the selection of an icon from a given input element and updates the relevant properties and events.
      * @function selectIcon

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

@@ -71,6 +71,7 @@ export default class Img extends WJElement {
      * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.
      */
     get loader(): string | null;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Creates and assembles a lazy-loaded image element within a document fragment.
      * @returns {DocumentFragment} A document fragment containing the image element.

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

@@ -78,6 +78,10 @@ export default class InfiniteScroll extends WJElement {
     queryParams: any;
     size: any;
     currentPage: number;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Attaches a scroll event listener to the current object.
      * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event

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

@@ -26,6 +26,7 @@ import { FormAssociatedElement } from '../internals/form-associated-element.js';
  * // @fires wje-input:clear - Dispatched when the input is cleared.
  */
 export default class Input extends FormAssociatedElement {
+    static _instanceId: number;
     /**
      * Getter for the cssStyleSheet attribute.
      * @returns {CSSStyleSheet} The CSS style sheet of the input element.
@@ -37,6 +38,7 @@ export default class Input extends FormAssociatedElement {
      */
     static get observedAttributes(): any[];
     pristine: boolean;
+    _instanceId: number;
     /**
      * Setter for the value attribute.
      * @param {string} value The value to set.
@@ -48,7 +50,7 @@ export default class Input extends FormAssociatedElement {
      * @returns {string} The current value from the input element, the internal _value, or an empty string.
      */
     get value(): string;
-    _value: string;
+    _value: any;
     /**
      * Sets the label attribute of the element.
      * @param {string} value The value to set as the label attribute.
@@ -135,11 +137,13 @@ export default class Input extends FormAssociatedElement {
      * @returns {string} The value of the 'variant' attribute or 'default' if not set.
      */
     get variant(): string;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Draws the input element.
      * @returns {DocumentFragment} The drawn input.
      */
     draw(): DocumentFragment;
+    _ariaErrorId: string;
     clear: HTMLElement;
     native: HTMLDivElement;
     labelElement: HTMLLabelElement;
@@ -149,6 +153,10 @@ export default class Input extends FormAssociatedElement {
      * Runs after the input is drawn to the DOM.
      */
     afterDraw(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Checks whether the input has a slot.
      * @param {HTMLElement} el The element to check.

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

@@ -58,6 +58,14 @@ export default class Item extends WJElement {
      * @returns {DocumentFragment}
      */
     draw(): DocumentFragment;
+    /**
+     * Called after the component has been drawn.
+     */
+    afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Determines if the given element or any of its ancestors matches the specified selector.
      * @param {string} selector The CSS selector to match against the element's ancestors.

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

@@ -69,6 +69,10 @@ export default class Kanban extends WJElement {
      * @returns {DocumentFragment}
      */
     draw(): DocumentFragment;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Called after the component has been drawn.
      */

package/dist/packages/wje-level-indicator/level-indicator.element.d.ts

@@ -16,6 +16,12 @@ export default class LevelIndicator extends WJElement {
      * @returns {CSSStyleSheet}
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
     /**
      * Sets the level attribute for an instance.
      * @param {string} value The value to set for the 'level' attribute.
@@ -74,6 +80,17 @@ export default class LevelIndicator extends WJElement {
      * @returns {void} This method does not return any value.
      */
     afterDraw(): void;
+    /**
+     * Handles attribute changes for ARIA sync.
+     * @param {string} name
+     * @param {string|null} oldValue
+     * @param {string|null} newValue
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Updates the class of each bar element based on the specified level.
      * @param {number} level The threshold level determining how many bars should be active.

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

@@ -28,4 +28,8 @@ export default class List extends WJElement {
      * Called after the component has been drawn.
      */
     afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
 }

package/dist/packages/wje-menu-item/menu-item.element.d.ts

@@ -100,6 +100,10 @@ export default class MenuItem extends WJElement {
      */
     afterDraw(): void;
     unbindRouterLinks: any;
+    /**
+     * Syncs ARIA attributes based on menu item state.
+     */
+    syncAria(): void;
     mouseenterHandler: (e: any) => void;
     rebindRouterLinks: (e: any) => void;
     unbindPortalRouterLinks: any;

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

@@ -85,6 +85,10 @@ export default class Option extends WJElement {
      * @returns {void} Does not return a value.
      */
     afterDraw(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Handles the click event on an option element and dispatches a custom event when triggered.
      * @param {Event} e The click event object that triggered the callback.

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

@@ -177,6 +177,10 @@ export default class Options extends WJElement {
     draw(): DocumentFragment;
     infiniteScroll: HTMLElement;
     response: any;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     afterDraw(): void;
     dispatchOptionsLoadEvent: (e: any) => void;
     /**

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

@@ -21,4 +21,8 @@ export default class Orgchart extends WJElement {
      */
     draw(): DocumentFragment;
     native: HTMLDivElement;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
 }

package/dist/packages/wje-progress-bar/progress-bar.element.d.ts

@@ -71,6 +71,17 @@ export default class ProgressBar extends WJElement {
     draw(context: object, store: object, params: object): DocumentFragment;
     background: SVGCircleElement | SVGRectElement;
     bar: SVGCircleElement | SVGRectElement;
+    /**
+     * Handles attribute changes for ARIA sync.
+     * @param {string} name
+     * @param {string|null} oldValue
+     * @param {string|null} newValue
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Adds event listeners after the component is drawn.
      */