selective-ui 1.0.2 → 1.0.4

package/src/js/components/accessorybox.js

@@ -1,125 +1,125 @@
-import { ModelManager } from "../core/model-manager";
-import { OptionModel } from "../models/option-model";
-import { iEvents } from "../utils/ievents";
-import { Libs } from "../utils/libs";
-
-/**
- * @class
- */
-export class AccessoryBox {
-    /**
-     * @type {MountViewResult<any>}
-     */
-    nodeMounted = null;
-
-    /**
-     * @type {HTMLDivElement}
-     */
-    node = null;
-
-    options = null;
-
-    /** @type {HTMLDivElement} */
-    selectUIMask;
-
-    /** @type {HTMLDivElement} */
-    parentMask;
-
-    /** @type {ModelManager} */
-    modelManager;
-
-    /**
-     * Initializes the accessory box with optional configuration and immediately calls init() if provided.
-     *
-     * @param {object|null} options - Configuration options for the accessory box (e.g., layout and behavior).
-     */
-    constructor(options = null) {
-        options && this.init(options);
-    }
-
-    /**
-     * Creates the accessory box DOM node and stores the provided options.
-     * The node is initially hidden and stops mouseup events from bubbling.
-     *
-     * @param {object} options - Configuration object for the accessory box.
-     */
-    init(options) {
-        this.nodeMounted = Libs.mountNode({
-            AccessoryBox: {
-                tag: {node: "div", classList: ["selective-ui-accessorybox", "hide"], onmouseup: (evt) => {
-                    evt.stopPropagation();
-                }}
-            }
-        });
-        this.node = /** @type {HTMLDivElement} */ (this.nodeMounted.view);
-        this.options = options;
-    }
-
-    /**
-     * Sets the root references for the accessory box (mask elements) and refreshes its location in the DOM.
-     *
-     * @param {HTMLDivElement} selectUIMask - The overlay/mask element of the main Select UI.
-     */
-    setRoot(selectUIMask) {
-        this.selectUIMask = selectUIMask;
-        this.parentMask = /** @type {HTMLDivElement} */ (selectUIMask.parentElement);
-
-        this.refreshLocation();
-    }
-
-    /**
-     * Inserts the accessory box before or after the Select UI mask depending on the configured accessoryStyle.
-     * Keeps the accessory box aligned relative to the parent mask.
-     */
-    refreshLocation() {
-        this.parentMask.insertBefore(this.node, (this.options.accessoryStyle == "top" ? this.selectUIMask : this.selectUIMask.nextSibling));
-    }
-
-    /**
-     * Assigns a ModelManager instance used to trigger and manage selection state changes.
-     *
-     * @param {ModelManager} modelManager - The model manager controlling option state.
-     */
-    setModelManager(modelManager) {
-        this.modelManager = modelManager;
-    }
-
-    /**
-     * Renders accessory items for the currently selected options in multiple-select mode.
-     * Shows the accessory box when there are items; otherwise hides it. Triggers a window resize event.
-     *
-     * @param {OptionModel[]} modelDatas - List of option models to render as accessory items.
-     */
-    setModelData(modelDatas) {
-        this.node.replaceChildren();
-        
-        if (modelDatas.length > 0 && this.options.multiple) {
-            this.node.classList.remove("hide");
-
-            modelDatas.forEach(modelData => {
-                Libs.mountNode({
-                    AccessoryItem: {
-                        tag: {node: "div", classList: ["accessory-item"]},
-                        child: {
-                            Button: {
-                                tag: {node: "span", classList: ["accessory-item-button"], role: "button", ariaLabel: `${this.options.textAccessoryDeselect}${modelData.textContent}`, title: `${this.options.textAccessoryDeselect}${modelData.textContent}`, onclick: (evt) => {
-                                    this.modelManager.triggerChanging("select");
-                                    setTimeout(() => {
-                                        modelData.selected = false;
-                                    }, 10);
-                                }}
-                            },
-                            Content: {
-                                tag: {node: "span", classList: ["accessory-item-content"], innerHTML: modelData.text}
-                            }
-                        }
-                    }
-                }, this.node);
-            });
-        }
-        else {
-            this.node.classList.add("hide");
-        }
-        iEvents.trigger(window, "resize");
-    }
+import { ModelManager } from "../core/model-manager";
+import { OptionModel } from "../models/option-model";
+import { iEvents } from "../utils/ievents";
+import { Libs } from "../utils/libs";
+
+/**
+ * @class
+ */
+export class AccessoryBox {
+    /**
+     * @type {MountViewResult<any>}
+     */
+    nodeMounted = null;
+
+    /**
+     * @type {HTMLDivElement}
+     */
+    node = null;
+
+    options = null;
+
+    /** @type {HTMLDivElement} */
+    selectUIMask;
+
+    /** @type {HTMLDivElement} */
+    parentMask;
+
+    /** @type {ModelManager} */
+    modelManager;
+
+    /**
+     * Initializes the accessory box with optional configuration and immediately calls init() if provided.
+     *
+     * @param {object|null} options - Configuration options for the accessory box (e.g., layout and behavior).
+     */
+    constructor(options = null) {
+        options && this.init(options);
+    }
+
+    /**
+     * Creates the accessory box DOM node and stores the provided options.
+     * The node is initially hidden and stops mouseup events from bubbling.
+     *
+     * @param {object} options - Configuration object for the accessory box.
+     */
+    init(options) {
+        this.nodeMounted = Libs.mountNode({
+            AccessoryBox: {
+                tag: {node: "div", classList: ["selective-ui-accessorybox", "hide"], onmouseup: (evt) => {
+                    evt.stopPropagation();
+                }}
+            }
+        });
+        this.node = /** @type {HTMLDivElement} */ (this.nodeMounted.view);
+        this.options = options;
+    }
+
+    /**
+     * Sets the root references for the accessory box (mask elements) and refreshes its location in the DOM.
+     *
+     * @param {HTMLDivElement} selectUIMask - The overlay/mask element of the main Select UI.
+     */
+    setRoot(selectUIMask) {
+        this.selectUIMask = selectUIMask;
+        this.parentMask = /** @type {HTMLDivElement} */ (selectUIMask.parentElement);
+
+        this.refreshLocation();
+    }
+
+    /**
+     * Inserts the accessory box before or after the Select UI mask depending on the configured accessoryStyle.
+     * Keeps the accessory box aligned relative to the parent mask.
+     */
+    refreshLocation() {
+        this.parentMask.insertBefore(this.node, (this.options.accessoryStyle == "top" ? this.selectUIMask : this.selectUIMask.nextSibling));
+    }
+
+    /**
+     * Assigns a ModelManager instance used to trigger and manage selection state changes.
+     *
+     * @param {ModelManager} modelManager - The model manager controlling option state.
+     */
+    setModelManager(modelManager) {
+        this.modelManager = modelManager;
+    }
+
+    /**
+     * Renders accessory items for the currently selected options in multiple-select mode.
+     * Shows the accessory box when there are items; otherwise hides it. Triggers a window resize event.
+     *
+     * @param {OptionModel[]} modelDatas - List of option models to render as accessory items.
+     */
+    setModelData(modelDatas) {
+        this.node.replaceChildren();
+        
+        if (modelDatas.length > 0 && this.options.multiple) {
+            this.node.classList.remove("hide");
+
+            modelDatas.forEach(modelData => {
+                Libs.mountNode({
+                    AccessoryItem: {
+                        tag: {node: "div", classList: ["accessory-item"]},
+                        child: {
+                            Button: {
+                                tag: {node: "span", classList: ["accessory-item-button"], role: "button", ariaLabel: `${this.options.textAccessoryDeselect}${modelData.textContent}`, title: `${this.options.textAccessoryDeselect}${modelData.textContent}`, onclick: (evt) => {
+                                    this.modelManager.triggerChanging("select");
+                                    setTimeout(() => {
+                                        modelData.selected = false;
+                                    }, 10);
+                                }}
+                            },
+                            Content: {
+                                tag: {node: "span", classList: ["accessory-item-content"], innerHTML: modelData.text}
+                            }
+                        }
+                    }
+                }, this.node);
+            });
+        }
+        else {
+            this.node.classList.add("hide");
+        }
+        iEvents.trigger(window, "resize");
+    }
 }

package/src/js/components/directive.js

@@ -1,38 +1,38 @@
-import {Libs} from "../utils/libs.js";
-
-/**
- * @class
- */
-export class Directive {
-    constructor() {
-        this.#init();
-    }
-    /**
-     * @type {Element}
-     */
-    node = null;
-    
-    /**
-     * Represents a directive button element used to toggle dropdown state.
-     * Initializes a clickable node with appropriate ARIA attributes for accessibility.
-     */
-    #init() {
-        this.node = Libs.nodeCreator({
-            node: "div", classList: "selective-ui-directive", role: "button", ariaLabel: "Toggle dropdown"
-        });
-    }
-    
-    /**
-     * Sets the dropdown state by toggling the "drop-down" CSS class on the directive node.
-     *
-     * @param {boolean} value - If true, adds the "drop-down" class; otherwise removes it.
-     */
-    setDropdown(value) {
-        if (value) {
-            this.node.classList.add("drop-down");
-        }
-        else {
-            this.node.classList.remove("drop-down");
-        }
-    }
+import {Libs} from "../utils/libs.js";
+
+/**
+ * @class
+ */
+export class Directive {
+    constructor() {
+        this.#init();
+    }
+    /**
+     * @type {Element}
+     */
+    node = null;
+    
+    /**
+     * Represents a directive button element used to toggle dropdown state.
+     * Initializes a clickable node with appropriate ARIA attributes for accessibility.
+     */
+    #init() {
+        this.node = Libs.nodeCreator({
+            node: "div", classList: "selective-ui-directive", role: "button", ariaLabel: "Toggle dropdown"
+        });
+    }
+    
+    /**
+     * Sets the dropdown state by toggling the "drop-down" CSS class on the directive node.
+     *
+     * @param {boolean} value - If true, adds the "drop-down" class; otherwise removes it.
+     */
+    setDropdown(value) {
+        if (value) {
+            this.node.classList.add("drop-down");
+        }
+        else {
+            this.node.classList.remove("drop-down");
+        }
+    }
 }

package/src/js/components/empty-state.js

@@ -1,68 +1,68 @@
-import {Libs} from "../utils/libs.js";
-
-/**
- * @class
- */
-export class EmptyState {
-    /**
-     * @type {HTMLDivElement}
-     */
-    node = null;
-
-    options = null;
-
-    /**
-     * Represents an empty state component that displays a message when no data or search results are available.
-     * Provides methods to show/hide the state and check its visibility.
-     */
-    constructor(options = null) {
-        options && this.init(options);
-    }
-
-    /**
-     * Initializes the empty state element with ARIA attributes for accessibility and stores configuration options.
-     *
-     * @param {object} options - Configuration object containing text for "no data" and "not found" states.
-     */
-    init(options) {
-        this.options = options;
-        
-        this.node = /** @type {HTMLDivElement} */ (Libs.nodeCreator({
-            node: "div",
-            classList: ["selective-ui-empty-state", "hide"],
-            role: "status",
-            ariaLive: "polite"
-        }));
-    }
-
-    /**
-     * Displays the empty state message based on the provided type.
-     *
-     * @param {"notfound" | "nodata"} [type="nodata"] - Determines which message to show:
-     *        "notfound" for search results not found, "nodata" for no available data.
-     */
-    show(type = "nodata") {
-        const text = type === "notfound" 
-            ? this.options.textNotFound 
-            : this.options.textNoData;
-        
-        this.node.textContent = text;
-        this.node.classList.remove("hide");
-    }
-
-    /**
-     * Hides the empty state element by adding the "hide" class.
-     */
-    hide() {
-        this.node.classList.add("hide");
-    }
-
-    /**
-     * Indicates whether the empty state is currently visible.
-     *
-     * @returns {boolean} - True if visible, false otherwise.
-     */
-    get isVisible() {
-        return !this.node.classList.contains("hide");
-    }
+import {Libs} from "../utils/libs.js";
+
+/**
+ * @class
+ */
+export class EmptyState {
+    /**
+     * @type {HTMLDivElement}
+     */
+    node = null;
+
+    options = null;
+
+    /**
+     * Represents an empty state component that displays a message when no data or search results are available.
+     * Provides methods to show/hide the state and check its visibility.
+     */
+    constructor(options = null) {
+        options && this.init(options);
+    }
+
+    /**
+     * Initializes the empty state element with ARIA attributes for accessibility and stores configuration options.
+     *
+     * @param {object} options - Configuration object containing text for "no data" and "not found" states.
+     */
+    init(options) {
+        this.options = options;
+        
+        this.node = /** @type {HTMLDivElement} */ (Libs.nodeCreator({
+            node: "div",
+            classList: ["selective-ui-empty-state", "hide"],
+            role: "status",
+            ariaLive: "polite"
+        }));
+    }
+
+    /**
+     * Displays the empty state message based on the provided type.
+     *
+     * @param {"notfound" | "nodata"} [type="nodata"] - Determines which message to show:
+     *        "notfound" for search results not found, "nodata" for no available data.
+     */
+    show(type = "nodata") {
+        const text = type === "notfound" 
+            ? this.options.textNotFound 
+            : this.options.textNoData;
+        
+        this.node.textContent = text;
+        this.node.classList.remove("hide");
+    }
+
+    /**
+     * Hides the empty state element by adding the "hide" class.
+     */
+    hide() {
+        this.node.classList.add("hide");
+    }
+
+    /**
+     * Indicates whether the empty state is currently visible.
+     *
+     * @returns {boolean} - True if visible, false otherwise.
+     */
+    get isVisible() {
+        return !this.node.classList.contains("hide");
+    }
 }

package/src/js/components/loading-state.js

@@ -1,60 +1,60 @@
-import { Libs } from "../utils/libs";
-
-export class LoadingState {
-
-    /** @type {HTMLDivElement} */
-    node = null;
-    
-    options = null;
-
-    /**
-     * Represents a loading state component that displays a loading message during data fetch or processing.
-     * Provides methods to show/hide the state and check its visibility.
-     */
-    constructor(options = null) { 
-        options && this.init(options); 
-    }
-    
-    /**
-     * Initializes the loading state element with ARIA attributes for accessibility and stores configuration options.
-     *
-     * @param {object} options - Configuration object containing text for the loading message.
-     */
-    init(options) {
-        this.options = options;
-        this.node = /** @type {HTMLDivElement} */(Libs.nodeCreator({
-            node: "div",
-            classList: ["selective-ui-loading-state", "hide"],
-            textContent: options.textLoading,
-            role: "status",
-            ariaLive: "polite"
-        }));
-    }
-
-    /**
-     * Displays the loading state message and adjusts its size based on whether items are present.
-     *
-     * @param {boolean} hasItems - If true, applies a "small" style for compact display.
-     */
-    show(hasItems) {
-        this.node.textContent = this.options.textLoading;
-        this.node.classList.toggle("small", hasItems);
-        this.node.classList.remove("hide");
-    }
-
-    /**
-     * Hides the loading state element by adding the "hide" class.
-     */
-    hide() {
-        this.node.classList.add("hide");
-    }
-
-    /**
-     * Indicates whether the loading state is currently visible.
-     *
-     * @returns {boolean} - True if visible, false otherwise.
-     */
-    get isVisible() {
-        return !this.node.classList.contains("hide");
-    }
+import { Libs } from "../utils/libs";
+
+export class LoadingState {
+
+    /** @type {HTMLDivElement} */
+    node = null;
+    
+    options = null;
+
+    /**
+     * Represents a loading state component that displays a loading message during data fetch or processing.
+     * Provides methods to show/hide the state and check its visibility.
+     */
+    constructor(options = null) { 
+        options && this.init(options); 
+    }
+    
+    /**
+     * Initializes the loading state element with ARIA attributes for accessibility and stores configuration options.
+     *
+     * @param {object} options - Configuration object containing text for the loading message.
+     */
+    init(options) {
+        this.options = options;
+        this.node = /** @type {HTMLDivElement} */(Libs.nodeCreator({
+            node: "div",
+            classList: ["selective-ui-loading-state", "hide"],
+            textContent: options.textLoading,
+            role: "status",
+            ariaLive: "polite"
+        }));
+    }
+
+    /**
+     * Displays the loading state message and adjusts its size based on whether items are present.
+     *
+     * @param {boolean} hasItems - If true, applies a "small" style for compact display.
+     */
+    show(hasItems) {
+        this.node.textContent = this.options.textLoading;
+        this.node.classList.toggle("small", hasItems);
+        this.node.classList.remove("hide");
+    }
+
+    /**
+     * Hides the loading state element by adding the "hide" class.
+     */
+    hide() {
+        this.node.classList.add("hide");
+    }
+
+    /**
+     * Indicates whether the loading state is currently visible.
+     *
+     * @returns {boolean} - True if visible, false otherwise.
+     */
+    get isVisible() {
+        return !this.node.classList.contains("hide");
+    }
 }