wj-elements 0.1.174 → 0.1.175

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

@@ -18,12 +18,10 @@ export default class WJElement extends HTMLElement {
      * @param [options] Additional options for defining the element.
      */
     static define(name: any, elementConstructor?: typeof WJElement, options?: {}): void;
-    isAttached: boolean;
     service: UniversalService;
-    rendering: boolean;
     _dependencies: {};
     /**
-     * @typedef {CREATED | ATTACHED | BEGINING | START | DRAWING | DONE | DISCONNECTED} DrawingStatus
+     * @typedef {object} DrawingStatuses
      * @property {number} CREATED - The component has been created.
      * @property {number} ATTACHED - The component has been attached to the DOM.
      * @property {number} BEGINING - The component is beginning to draw.
@@ -32,6 +30,30 @@ export default class WJElement extends HTMLElement {
      * @property {number} DONE - The component has finished drawing.
      * @property {number} DISCONNECTED - The component has been disconnected from the DOM.
      */
+    /**
+     * WJElement is a base class for custom web components with managed lifecycle, attribute/property sync,
+     * permission-based visibility, and extensibility hooks.
+     * @property {boolean} isAttached - True if the component is currently attached to the DOM.
+     * @property {DrawingStatuses} drawingStatuses - Enum of possible drawing states.
+     * @property {number} drawingStatus - Current drawing status (see drawingStatuses).
+     * @property {boolean} _pristine - True if the component has not been updated since last render.
+     * @property {boolean} isRendering - True if a render is currently in progress.
+     * @property {number|null} rafId - ID of the scheduled animation frame for rendering, or null.
+     * @property {string|null} originalVisibility - Stores the original CSS visibility before rendering.
+     * @property {object} params - Stores the current attributes/properties for rendering.
+     * @property {Promise<void>} updateComplete - Promise resolved when the current update/render is complete.
+     * @property {string[]} permission - List of required permissions (from 'permission' attribute).
+     * @property {boolean} isPermissionCheck - Whether permission checking is enabled (from 'permission-check' attribute).
+     * @property {boolean} noShow - Whether the element should be hidden (from 'no-show' attribute).
+     * @property {string|undefined} isShadowRoot - Value of the 'shadow' attribute, if present.
+     * @property {boolean} hasShadowRoot - True if the 'shadow' attribute is present.
+     * @property {string} shadowType - Type of shadow root ('open' by default).
+     * @property {object} store - Reference to the global store instance.
+     * @property {object} defaultStoreActions - Default store actions for arrays and objects.
+     * @property {string[]|undefined} removeClassAfterConnect - Classes to remove after connect (from 'remove-class-after-connect' attribute).
+     * @property {object} dependencies - Registered component dependencies.
+     * @property {HTMLElement|ShadowRoot} context - The rendering context (shadow root or element itself).
+     */
     drawingStatuses: {
         CREATED: number;
         ATTACHED: number;
@@ -41,16 +63,12 @@ export default class WJElement extends HTMLElement {
         DONE: number;
         DISCONNECTED: number;
     };
-    drawingStatus: number;
-    _pristine: boolean;
-    _pristineCauseWeakMap: WeakMap<WeakKey, any>;
-    isRendering: boolean;
     rafId: number;
-    originalVisibility: any;
     params: {};
     updateComplete: Promise<any>;
     finisPromise: (value: any) => void;
     rejectPromise: (reason?: any) => void;
+    get drawingStatus(): number;
     /**
      * Sets the value of the 'permission' attribute.
      * @param {string[]} value The value to set for the 'permission' attribute.
@@ -97,7 +115,7 @@ export default class WJElement extends HTMLElement {
      * Gets the rendering context, either the shadow root or the component itself.
      * @returns The rendering context.
      */
-    get context(): any;
+    get context(): this | ShadowRoot;
     /**
      * Gets the store instance.
      * @returns {object} The store instance.
@@ -243,18 +261,6 @@ export default class WJElement extends HTMLElement {
      */
     attributeChangedCallback(name: any, old: any, newName: any): void;
     refresh(): void;
-    /**
-     * Refreshes the component by reinitializing it if it is in a drawing state.
-     * This method checks if the component's drawing status is at least in the START state.
-     * If so, it performs the following steps:
-     * 1. Calls the `beforeRedraw` hook if defined.
-     * 2. Calls the `beforeDisconnect` hook if defined.
-     * 3. Refreshes the update promise to manage the rendering lifecycle.
-     * 4. Calls the `afterDisconnect` hook if defined.
-     * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.
-     * If the component is not in a drawing state, it simply returns a resolved promise.
-     */
-    _refresh(): Promise<void>;
     stopRenderLoop(): void;
     /**
      * Displays the component's content, optionally forcing a re-render.
@@ -272,10 +278,8 @@ export default class WJElement extends HTMLElement {
      * @param {string} name The name in kebab-case format (e.g., "example-name").
      * @returns {string} The sanitized name in camelCase format (e.g., "exampleName").
      * @example
-     * // Returns 'exampleName'
      * sanitizeName('example-name');
      * @example
-     * // Returns 'myCustomComponent'
      * sanitizeName('my-custom-component');
      */
     sanitizeName(name: string): string;
@@ -291,11 +295,9 @@ export default class WJElement extends HTMLElement {
      *   get name() { return 'value'; },
      *   set name(val) { console.log(val); }
      * };
-     * // Returns { hasGetter: [Function: get name], hasSetter: [Function: set name] }
      * checkGetterSetter(obj, 'name');
      * @example
      * const obj = { prop: 42 };
-     * // Returns { hasGetter: null, hasSetter: null }
      * checkGetterSetter(obj, 'prop');
      */
     checkGetterSetter(obj: object, property: string): object;
@@ -303,12 +305,7 @@ export default class WJElement extends HTMLElement {
      * Sets up property accessors for the component's attributes.
      */
     setUpAccessors(): void;
-    /**
-     * Resolves the rendering process of the component.
-     * @returns A promise that resolves when rendering is complete.
-     * @private
-     */
-    private _resolveRender;
+    #private;
 }
 export let __esModule: string;
 export { WjePermissionsApi, WjElementUtils, event };

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

@@ -164,9 +164,9 @@ export default class Select extends WJElement {
     set value(value: string);
     /**
      * Getter for the value attribute.
-     * @returns {string} The value of the attribute.
+     * @returns {object} The value of the attribute.
      */
-    get value(): string;
+    get value(): object;
     /**
      * Getter for the customErrorDisplay attribute.
      * @returns {boolean} Whether the attribute is present.
@@ -318,10 +318,21 @@ export default class Select extends WJElement {
      */
     selectionChanged(option?: Element, length?: number): void;
     /**
-     * Handles the selection of options and updates the UI chips accordingly.
-     * Also manages the max selection logic and fires an event when selections change.
-     * @param {boolean} [silence] Indicates whether to suppress the event dispatch when a change occurs.
-     * @returns {void} Does not return anything.
+     * Updates the selected options and their corresponding chips.
+     * @param {boolean} [silence] Determines whether to suppress the "wje-select:change" event.
+     * @returns {void}
+     * @description
+     * This method fetches the currently selected options and updates the `selectedOptions` array.
+     * It clears and rebuilds the chips representing the selected items in the UI.
+     * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.
+     * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.
+     * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.
+     * @example
+     * // Call the method and allow event dispatch
+     * selections();
+     * @example
+     * // Call the method without dispatching the event
+     * selections(true);
      */
     selections(silence?: boolean): void;
     /**

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

@@ -19,6 +19,7 @@ export default class Stepper extends WJElement {
     currentStep: number;
     localizer: Localizer;
     steps: any[];
+    headerSteps: any[];
     get active(): string;
     get done(): string;
     /**
@@ -27,10 +28,10 @@ export default class Stepper extends WJElement {
      */
     draw(): DocumentFragment;
     header: HTMLDivElement;
-    headerSteps: NodeListOf<Element>;
-    prev: HTMLElement;
-    next: HTMLElement;
-    processStep(index: any, step: any, header: any, steps: any): void;
+    prev: HTMLSlotElement;
+    next: HTMLSlotElement;
+    finish: HTMLSlotElement;
+    processStep(index: any, step: any, header: any, steps: any): HTMLDivElement;
     /**
      * Sets up the attributes for the component.
      */
@@ -44,12 +45,11 @@ export default class Stepper extends WJElement {
     /**
      * Navigates to a specific step in a multi-step process and updates the stepper UI accordingly.
      * @param {number} stepIndex The index of the step to navigate to.
-     * @param {number} direction The navigation direction. A positive value indicates forward navigation, and a negative value indicates backward navigation.
      * //@fires stepper:next Dispatched when navigating to the next step.
      * //@fires stepper:prev Dispatched when navigating to the previous step.
      * //@fires stepper:finish Dispatched when the final step is completed.
      */
-    goToStep(stepIndex: number, direction: number): void;
+    goToStep(stepIndex: number): void;
     /**
      * Resets a step to its default state by clearing its active and done attributes.
      * Updates the step's badge to show its index and removes any color styling.
@@ -76,4 +76,5 @@ export default class Stepper extends WJElement {
      * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
      */
     setStepDone(nav: HTMLElement, badge?: HTMLElement | null): void;
+    setStepLocked(nav: any, badge?: any): void;
 }

package/dist/wje-element.js

@@ -5,9 +5,11 @@ var __typeError = (msg) => {
 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);
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _Event_instances, dispatch_fn;
+var _Event_instances, dispatch_fn, _drawingStatus, _isAttached, _isRendering, _originalVisibility, _pristine, _WJElement_instances, refresh_fn, resolveRender_fn;
 import { store, defaultStoreActions } from "./wje-store.js";
 class UniversalService {
   constructor(props = {}) {
@@ -445,6 +447,12 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   constructor() {
     super();
+    __privateAdd(this, _WJElement_instances);
+    __privateAdd(this, _drawingStatus);
+    __privateAdd(this, _isAttached);
+    __privateAdd(this, _isRendering);
+    __privateAdd(this, _originalVisibility);
+    __privateAdd(this, _pristine);
     /**
      * Initializes the component, setting up attributes and rendering.
      * @param [force] Whether to force initialization.
@@ -453,13 +461,13 @@ const _WJElement = class _WJElement extends HTMLElement {
     __publicField(this, "initWjElement", (force = false) => {
       return new Promise(async (resolve, reject) => {
         var _a;
-        this.drawingStatus = this.drawingStatuses.BEGINING;
+        __privateSet(this, _drawingStatus, this.drawingStatuses.BEGINING);
         (_a = this.setupAttributes) == null ? void 0 : _a.call(this);
         if (this.hasShadowRoot) {
           if (!this.shadowRoot) this.attachShadow({ mode: this.shadowType || "open" });
         }
         this.setUpAccessors();
-        this.drawingStatus = this.drawingStatuses.START;
+        __privateSet(this, _drawingStatus, this.drawingStatuses.START);
         await this.display(force);
         const sheet = new CSSStyleSheet();
         sheet.replaceSync(this.constructor.cssStyleSheet);
@@ -467,12 +475,12 @@ const _WJElement = class _WJElement extends HTMLElement {
         resolve();
       });
     });
-    this.isAttached = false;
+    __privateSet(this, _isAttached, false);
     this.service = new UniversalService({
       store
     });
     this.defineDependencies();
-    this.rendering = false;
+    __privateSet(this, _isRendering, false);
     this._dependencies = {};
     this.drawingStatuses = {
       CREATED: 0,
@@ -483,18 +491,20 @@ const _WJElement = class _WJElement extends HTMLElement {
       DONE: 5,
       DISCONNECTED: 6
     };
-    this.drawingStatus = this.drawingStatuses.CREATED;
-    this._pristine = true;
-    this._pristineCauseWeakMap = /* @__PURE__ */ new WeakMap();
-    this.isRendering = false;
+    __privateSet(this, _drawingStatus, this.drawingStatuses.CREATED);
+    __privateSet(this, _pristine, true);
+    __privateSet(this, _isRendering, false);
     this.rafId = null;
-    this.originalVisibility = null;
+    __privateSet(this, _originalVisibility, null);
     this.params = {};
     this.updateComplete = new Promise((resolve, reject) => {
       this.finisPromise = resolve;
       this.rejectPromise = reject;
     });
   }
+  get drawingStatus() {
+    return __privateGet(this, _drawingStatus);
+  }
   /**
    * Sets the value of the 'permission' attribute.
    * @param {string[]} value The value to set for the 'permission' attribute.
@@ -682,13 +692,13 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   connectedCallback() {
     var _a;
-    if (!this.isRendering) {
-      this.originalVisibility = this.originalVisibility ?? this.style.visibility;
+    if (!__privateGet(this, _isRendering)) {
+      __privateSet(this, _originalVisibility, __privateGet(this, _originalVisibility) ?? this.style.visibility);
       this.style.visibility = "hidden";
       (_a = this.setupAttributes) == null ? void 0 : _a.call(this);
       this.setUpAccessors();
-      this.drawingStatus = this.drawingStatuses.ATTACHED;
-      this._pristine = false;
+      __privateSet(this, _drawingStatus, this.drawingStatuses.ATTACHED);
+      __privateSet(this, _pristine, false);
       this.enqueueUpdate();
     }
   }
@@ -732,18 +742,18 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   disconnectedCallback() {
     var _a, _b;
-    if (this.isAttached) {
+    if (__privateGet(this, _isAttached)) {
       (_a = this.beforeDisconnect) == null ? void 0 : _a.call(this);
       this.context.innerHTML = "";
       (_b = this.afterDisconnect) == null ? void 0 : _b.call(this);
-      this.isAttached = false;
-      this.style.visibility = this.originalVisibility;
-      this.originalVisibility = null;
+      __privateSet(this, _isAttached, false);
+      this.style.visibility = __privateGet(this, _originalVisibility);
+      __privateSet(this, _originalVisibility, null);
     }
-    if (this.isRendering) {
+    if (__privateGet(this, _isRendering)) {
       this.stopRenderLoop();
     }
-    this.drawingStatus = this.drawingStatuses.DISCONNECTED;
+    __privateSet(this, _drawingStatus, this.drawingStatuses.DISCONNECTED);
     this.componentCleanup();
   }
   /**
@@ -751,8 +761,8 @@ const _WJElement = class _WJElement extends HTMLElement {
    * This method processes the current render promise and then refreshes the component.
    */
   enqueueUpdate() {
-    if (!this.isRendering) {
-      this.rafId = requestAnimationFrame(() => this._refresh());
+    if (!__privateGet(this, _isRendering)) {
+      this.rafId = requestAnimationFrame(() => __privateMethod(this, _WJElement_instances, refresh_fn).call(this));
     }
   }
   /**
@@ -763,7 +773,7 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   attributeChangedCallback(name, old, newName) {
     if (old !== newName) {
-      this._pristine = false;
+      __privateSet(this, _pristine, false);
       this.enqueueUpdate();
     }
   }
@@ -772,52 +782,9 @@ const _WJElement = class _WJElement extends HTMLElement {
       this.finisPromise = resolve;
       this.rejectPromise = reject;
     });
-    this._pristine = false;
+    __privateSet(this, _pristine, false);
     this.enqueueUpdate();
   }
-  /**
-   * Refreshes the component by reinitializing it if it is in a drawing state.
-   * This method checks if the component's drawing status is at least in the START state.
-   * If so, it performs the following steps:
-   * 1. Calls the `beforeRedraw` hook if defined.
-   * 2. Calls the `beforeDisconnect` hook if defined.
-   * 3. Refreshes the update promise to manage the rendering lifecycle.
-   * 4. Calls the `afterDisconnect` hook if defined.
-   * 5. Reinitializes the component by calling `initWjElement` with `true` to force initialization.
-   * If the component is not in a drawing state, it simply returns a resolved promise.
-   */
-  async _refresh() {
-    var _a, _b, _c;
-    if (this.isRendering) {
-      this.rafId = requestAnimationFrame(() => this._refresh());
-      return;
-    }
-    if (!this._pristine) {
-      this._pristine = true;
-      this.isRendering = true;
-      if (this.isAttached) {
-        (_a = this.beforeRedraw) == null ? void 0 : _a.call(this);
-        (_b = this.beforeDisconnect) == null ? void 0 : _b.call(this);
-        (_c = this.afterDisconnect) == null ? void 0 : _c.call(this);
-      } else {
-        this.stopRenderLoop();
-      }
-      try {
-        await this.initWjElement(true);
-      } catch (error) {
-        console.error("Render error:", error);
-      } finally {
-        this.isRendering = false;
-        if (!this._pristine) {
-          this._pristine = false;
-          this.enqueueUpdate();
-        } else {
-          this.finisPromise();
-          this.style.visibility = this.originalVisibility;
-        }
-      }
-    }
-  }
   stopRenderLoop() {
     if (this.rafId) {
       cancelAnimationFrame(this.rafId);
@@ -860,13 +827,13 @@ const _WJElement = class _WJElement extends HTMLElement {
       this.remove();
       return Promise.resolve();
     }
-    return this._resolveRender();
+    return __privateMethod(this, _WJElement_instances, resolveRender_fn).call(this);
   }
   /**
    * Renders the component's content.
    */
   async render() {
-    this.drawingStatus = this.drawingStatuses.DRAWING;
+    __privateSet(this, _drawingStatus, this.drawingStatuses.DRAWING);
     let _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));
     if (_draw instanceof Promise || (_draw == null ? void 0 : _draw.constructor.name) === "Promise") {
       _draw = await _draw;
@@ -888,10 +855,8 @@ const _WJElement = class _WJElement extends HTMLElement {
    * @param {string} name The name in kebab-case format (e.g., "example-name").
    * @returns {string} The sanitized name in camelCase format (e.g., "exampleName").
    * @example
-   * // Returns 'exampleName'
    * sanitizeName('example-name');
    * @example
-   * // Returns 'myCustomComponent'
    * sanitizeName('my-custom-component');
    */
   sanitizeName(name) {
@@ -910,11 +875,9 @@ const _WJElement = class _WJElement extends HTMLElement {
    *   get name() { return 'value'; },
    *   set name(val) { console.log(val); }
    * };
-   * // Returns { hasGetter: [Function: get name], hasSetter: [Function: set name] }
    * checkGetterSetter(obj, 'name');
    * @example
    * const obj = { prop: 42 };
-   * // Returns { hasGetter: null, hasSetter: null }
    * checkGetterSetter(obj, 'prop');
    */
   checkGetterSetter(obj, property) {
@@ -945,36 +908,74 @@ const _WJElement = class _WJElement extends HTMLElement {
       });
     });
   }
-  /**
-   * Resolves the rendering process of the component.
-   * @returns A promise that resolves when rendering is complete.
-   * @private
-   */
-  _resolveRender() {
-    this.params = WjElementUtils.getAttributes(this);
-    return new Promise(async (resolve, reject) => {
-      var _a;
-      const __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));
-      if (__beforeDraw instanceof Promise || (__beforeDraw == null ? void 0 : __beforeDraw.constructor.name) === "Promise") {
-        await __beforeDraw;
-      }
-      await this.render();
-      const __afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this));
-      if (__afterDraw instanceof Promise || (__afterDraw == null ? void 0 : __afterDraw.constructor.name) === "Promise") {
-        await __afterDraw;
-      }
-      this.rendering = false;
-      this.isAttached = true;
-      if (this.removeClassAfterConnect) {
-        this.classList.remove(...this.removeClassAfterConnect);
+};
+_drawingStatus = new WeakMap();
+_isAttached = new WeakMap();
+_isRendering = new WeakMap();
+_originalVisibility = new WeakMap();
+_pristine = new WeakMap();
+_WJElement_instances = new WeakSet();
+refresh_fn = async function() {
+  var _a, _b, _c;
+  if (__privateGet(this, _isRendering)) {
+    this.rafId = requestAnimationFrame(() => __privateMethod(this, _WJElement_instances, refresh_fn).call(this));
+    return;
+  }
+  if (!__privateGet(this, _pristine)) {
+    __privateSet(this, _pristine, true);
+    __privateSet(this, _isRendering, true);
+    if (__privateGet(this, _isAttached)) {
+      (_a = this.beforeRedraw) == null ? void 0 : _a.call(this);
+      (_b = this.beforeDisconnect) == null ? void 0 : _b.call(this);
+      (_c = this.afterDisconnect) == null ? void 0 : _c.call(this);
+    } else {
+      this.stopRenderLoop();
+    }
+    try {
+      await this.initWjElement(true);
+    } catch (error) {
+      console.error("Render error:", error);
+    } finally {
+      __privateSet(this, _isRendering, false);
+      if (!__privateGet(this, _pristine)) {
+        __privateSet(this, _pristine, false);
+        this.enqueueUpdate();
+      } else {
+        this.finisPromise();
+        this.style.visibility = __privateGet(this, _originalVisibility);
       }
-      this.drawingStatus = this.drawingStatuses.DONE;
-      resolve();
-    }).catch((e) => {
-      console.log(e);
-    });
+    }
   }
 };
+/**
+ * Resolves the rendering process of the component.
+ * @returns A promise that resolves when rendering is complete.
+ * @private
+ */
+resolveRender_fn = function() {
+  this.params = WjElementUtils.getAttributes(this);
+  return new Promise(async (resolve, reject) => {
+    var _a;
+    const __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));
+    if (__beforeDraw instanceof Promise || (__beforeDraw == null ? void 0 : __beforeDraw.constructor.name) === "Promise") {
+      await __beforeDraw;
+    }
+    await this.render();
+    const __afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this));
+    if (__afterDraw instanceof Promise || (__afterDraw == null ? void 0 : __afterDraw.constructor.name) === "Promise") {
+      await __afterDraw;
+    }
+    __privateSet(this, _isRendering, false);
+    __privateSet(this, _isAttached, true);
+    if (this.removeClassAfterConnect) {
+      this.classList.remove(...this.removeClassAfterConnect);
+    }
+    __privateSet(this, _drawingStatus, this.drawingStatuses.DONE);
+    resolve();
+  }).catch((e) => {
+    console.log(e);
+  });
+};
 /**
  * Processes and combines two templates into one.
  * @param pTemplate The primary template.