selective-ui 1.2.1 → 1.2.2

package/src/ts/models/group-model.ts

@@ -5,28 +5,28 @@ import type { GroupViewTags } from "../types/views/view.group.type";
 import { GroupView } from "../views/group-view";
 import { OptionModel } from "./option-model";
 import type { IEventCallback } from "../types/utils/ievents.type";
-import { DefaultConfig } from "../types/utils/istorage.type";
+import { SelectiveOptions } from "../types/utils/selective.type";
 
 /**
  * @extends {Model<HTMLOptGroupElement, GroupViewTags, GroupView>}
  */
-export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupView, DefaultConfig> {
-    label = "";
+export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupView, SelectiveOptions> {
+    public label = "";
 
-    items: OptionModel[] = [];
+    public items: OptionModel[] = [];
 
-    collapsed = false;
+    public collapsed = false;
 
-    private _privOnCollapsedChanged: Array<(evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void> = [];
+    private privOnCollapsedChanged: Array<(evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void> = [];
 
     /**
      * Initializes a group model with options and an optional <optgroup> target.
      * Reads the label and collapsed state from the target element's attributes/dataset.
      *
-     * @param {DefaultConfig} options - Configuration for the model.
+     * @param {SelectiveOptions} options - Configuration for the model.
      * @param {HTMLOptGroupElement} [targetElement] - The source <optgroup> element.
      */
-    constructor(options: DefaultConfig, targetElement?: HTMLOptGroupElement) {
+    public constructor(options: SelectiveOptions, targetElement?: HTMLOptGroupElement) {
         super(options, targetElement ?? null, null);
 
         if (targetElement) {
@@ -40,7 +40,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @type {string[]}
      */
-    get value(): string[] {
+    public get value(): string[] {
         return this.items.map((item) => item.value);
     }
 
@@ -49,7 +49,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @type {OptionModel[]}
      */
-    get selectedItems(): OptionModel[] {
+    public get selectedItems(): OptionModel[] {
         return this.items.filter((item) => item.selected);
     }
 
@@ -58,7 +58,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @type {OptionModel[]}
      */
-    get visibleItems(): OptionModel[] {
+    public get visibleItems(): OptionModel[] {
         return this.items.filter((item) => item.visible);
     }
 
@@ -67,7 +67,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @type {boolean}
      */
-    get hasVisibleItems(): boolean {
+    public get hasVisibleItems(): boolean {
         return this.visibleItems.length > 0;
     }
 
@@ -76,7 +76,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {HTMLOptGroupElement} targetElement - The updated <optgroup> element.
      */
-    update(targetElement: HTMLOptGroupElement): void {
+    public update(targetElement: HTMLOptGroupElement): void {
         this.label = targetElement.label;
         this.view?.updateLabel(this.label);
     }
@@ -85,7 +85,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      * Hook invoked when the target element reference changes.
      * Updates the view's label and collapsed state to keep UI in sync.
      */
-    onTargetChanged(): void {
+    public onTargetChanged(): void {
         if (this.view) {
             this.view.updateLabel(this.label);
             this.view.setCollapsed(this.collapsed);
@@ -97,18 +97,18 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {(evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void} callback - Listener for collapse changes.
      */
-    onCollapsedChanged(callback: (evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void): void {
-        this._privOnCollapsedChanged.push(callback);
+    public onCollapsedChanged(callback: (evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void): void {
+        this.privOnCollapsedChanged.push(callback);
     }
 
     /**
      * Toggles the group's collapsed state, updates the view, and notifies registered listeners.
      */
-    toggleCollapse(): void {
+    public toggleCollapse(): void {
         this.collapsed = !this.collapsed;
         this.view?.setCollapsed(this.collapsed);
 
-        iEvents.callEvent<[GroupModel, boolean]>([this, this.collapsed], ...this._privOnCollapsedChanged);
+        iEvents.callEvent<[GroupModel, boolean]>([this, this.collapsed], ...this.privOnCollapsedChanged);
     }
 
     /**
@@ -116,7 +116,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {OptionModel} optionModel - The option to add.
      */
-    addItem(optionModel: OptionModel): void {
+    public addItem(optionModel: OptionModel): void {
         this.items.push(optionModel);
         optionModel.group = this;
     }
@@ -126,7 +126,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      *
      * @param {OptionModel} optionModel - The option to remove.
      */
-    removeItem(optionModel: OptionModel): void {
+    public removeItem(optionModel: OptionModel): void {
         const index = this.items.indexOf(optionModel);
         if (index > -1) {
             this.items.splice(index, 1);
@@ -138,7 +138,7 @@ export class GroupModel extends Model<HTMLOptGroupElement, GroupViewTags, GroupV
      * Updates the group's visibility in the view, typically based on children visibility.
      * No-ops if the view is not initialized.
      */
-    updateVisibility(): void {
+    public updateVisibility(): void {
         this.view?.updateVisibility();
     }
 }

package/src/ts/models/option-model.ts

@@ -12,17 +12,17 @@ import { SelectiveOptions } from "../types/utils/selective.type";
  * @extends {Model<HTMLOptionElement, OptionViewTags, OptionView, SelectiveOptions>}
  */
 export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, OptionView, SelectiveOptions> {
-    private _privOnSelected: Array<(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void> = [];
+    private privOnSelected: Array<(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void> = [];
 
-    private _privOnInternalSelected: Array<(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void> = [];
+    private privOnInternalSelected: Array<(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void> = [];
 
-    private _privOnVisibilityChanged: Array<(evtToken: IEventCallback, model: OptionModel, visible: boolean) => void> = [];
+    private privOnVisibilityChanged: Array<(evtToken: IEventCallback, model: OptionModel, visible: boolean) => void> = [];
 
     private _visible = true;
 
     private _highlighted = false;
 
-    group: GroupModel | null = null;
+    public group: GroupModel | null = null;
 
     /**
      * Constructs a Model instance with configuration options and optional bindings to a target element and view.
@@ -32,7 +32,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * @param {HTMLOptionElement|null} [targetElement=null] - The underlying element (e.g., <option> or group node).
      * @param {OptionView|null} [view=null] - The associated view responsible for rendering the model.
      */
-    constructor(options: SelectiveOptions, targetElement: HTMLOptionElement | null = null, view: OptionView | null = null) {
+    public constructor(options: SelectiveOptions, targetElement: HTMLOptionElement | null = null, view: OptionView | null = null) {
         super(options, targetElement, view);
         
         (async () => {
@@ -45,7 +45,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {string}
      */
-    get imageSrc(): string {
+    public get imageSrc(): string {
         return this.dataset?.imgsrc || this.dataset?.image || "";
     }
 
@@ -54,7 +54,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    get hasImage(): boolean {
+    public get hasImage(): boolean {
         return !!this.imageSrc;
     }
 
@@ -63,7 +63,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {string}
      */
-    get value(): string {
+    public get value(): string {
         return this.targetElement?.value ?? "";
     }
 
@@ -72,7 +72,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    get selected(): boolean {
+    public get selected(): boolean {
         return !!this.targetElement?.selected;
     }
 
@@ -82,9 +82,9 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    set selected(value: boolean) {
+    public set selected(value: boolean) {
         this.selectedNonTrigger = value;
-        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this._privOnSelected);
+        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this.privOnSelected);
     }
 
     /**
@@ -92,7 +92,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    get visible(): boolean {
+    public get visible(): boolean {
         return this._visible;
     }
 
@@ -101,14 +101,14 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    set visible(value: boolean) {
+    public set visible(value: boolean) {
         if (this._visible === value) return;
         this._visible = value;
 
         const viewEl = this.view?.getView?.();
         if (viewEl) viewEl.classList.toggle("hide", !value);
 
-        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this._privOnVisibilityChanged);
+        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this.privOnVisibilityChanged);
     }
 
     /**
@@ -116,7 +116,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    get selectedNonTrigger(): boolean {
+    public get selectedNonTrigger(): boolean {
         return this.selected;
     }
 
@@ -126,7 +126,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    set selectedNonTrigger(value: boolean) {
+    public set selectedNonTrigger(value: boolean) {
         const input = this.view?.view?.tags?.OptionInput;
         const viewEl = this.view?.getView?.();
 
@@ -140,7 +140,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
 
         if (this.targetElement) this.targetElement.selected = value;
 
-        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this._privOnInternalSelected);
+        iEvents.callEvent<[OptionModel, boolean]>([this, value], ...this.privOnInternalSelected);
     }
 
     /**
@@ -149,7 +149,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {string}
      */
-    get text(): string {
+    public get text(): string {
         const raw = this.dataset?.mask ?? this.targetElement?.text ?? "";
         const translated = Libs.tagTranslate(raw);
         return this.options.allowHtml ? translated : Libs.stripHtml(translated);
@@ -161,18 +161,18 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {string}
      */
-    get textContent(): string {
+    public get textContent(): string {
         return this.options.allowHtml ? Libs.stripHtml(this.text).trim() : this.text.trim();
     }
 
-    textToFind: string;
+    public textToFind: string;
 
     /**
      * Returns the dataset object of the underlying <option> element, or an empty object.
      *
      * @type {DOMStringMap|Record<string, string>}
      */
-    get dataset(): DOMStringMap {
+    public get dataset(): DOMStringMap {
         return this.targetElement?.dataset ?? ({} as DOMStringMap);
     }
 
@@ -181,7 +181,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    get highlighted(): boolean {
+    public get highlighted(): boolean {
         return this._highlighted;
     }
 
@@ -191,7 +191,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @type {boolean}
      */
-    set highlighted(value: boolean) {
+    public set highlighted(value: boolean) {
         const val = !!value;
         const viewEl = this.view?.getView?.();
 
@@ -204,8 +204,8 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @param {(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void} callback - Selection listener.
      */
-    onSelected(callback: (evtToken: IEventCallback, el: OptionModel, selected: boolean) => void): void {
-        this._privOnSelected.push(callback);
+    public onSelected(callback: (evtToken: IEventCallback, el: OptionModel, selected: boolean) => void): void {
+        this.privOnSelected.push(callback);
     }
 
     /**
@@ -213,8 +213,8 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @param {(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void} callback - Internal selection listener.
      */
-    onInternalSelected(callback: (evtToken: IEventCallback, el: OptionModel, selected: boolean) => void): void {
-        this._privOnInternalSelected.push(callback);
+    public onInternalSelected(callback: (evtToken: IEventCallback, el: OptionModel, selected: boolean) => void): void {
+        this.privOnInternalSelected.push(callback);
     }
 
     /**
@@ -222,8 +222,8 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      *
      * @param {(evtToken: IEventCallback, model: OptionModel, visible: boolean) => void} callback - Visibility listener.
      */
-    onVisibilityChanged(callback: (evtToken: IEventCallback, model: OptionModel, visible: boolean) => void): void {
-        this._privOnVisibilityChanged.push(callback);
+    public onVisibilityChanged(callback: (evtToken: IEventCallback, model: OptionModel, visible: boolean) => void): void {
+        this.privOnVisibilityChanged.push(callback);
     }
 
     /**
@@ -231,7 +231,7 @@ export class OptionModel extends Model<HTMLOptionElement, OptionViewTags, Option
      * Updates label content (HTML or text), image src/alt if present,
      * and synchronizes initial selected state to the view.
      */
-    onTargetChanged(): void {
+    public onTargetChanged(): void {
         this.textToFind = Libs.string2normalize(this.textContent.toLowerCase());
         if (!this.view) return;
 

package/src/ts/services/dataset-observer.ts

@@ -2,11 +2,11 @@
  * @class
  */
 export class DatasetObserver {
-    private _observer: MutationObserver;
+    private observer: MutationObserver;
 
-    private _element: HTMLElement;
+    private element: HTMLElement;
 
-    private _debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    private debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
     /**
      * Observes data-* attribute changes on a target element and debounces notifications.
@@ -14,10 +14,10 @@ export class DatasetObserver {
      *
      * @param {HTMLElement} element - The element whose dataset (data-* attributes) will be observed.
      */
-    constructor(element: HTMLElement) {
-        this._element = element;
+    public constructor(element: HTMLElement) {
+        this.element = element;
 
-        this._observer = new MutationObserver((mutations: MutationRecord[]) => {
+        this.observer = new MutationObserver((mutations: MutationRecord[]) => {
             let datasetChanged = false;
 
             for (const mutation of mutations) {
@@ -29,14 +29,14 @@ export class DatasetObserver {
 
             if (!datasetChanged) return;
 
-            if (this._debounceTimer) clearTimeout(this._debounceTimer);
-            this._debounceTimer = setTimeout(() => {
-                this.onChanged({ ...this._element.dataset });
+            if (this.debounceTimer) clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => {
+                this.onChanged({ ...this.element.dataset });
             }, 50);
         });
 
         element.addEventListener("dataset:changed", () => {
-            this.onChanged({ ...this._element.dataset });
+            this.onChanged({ ...this.element.dataset });
         });
     }
 
@@ -44,8 +44,8 @@ export class DatasetObserver {
      * Starts observing the element for attribute changes, including old values.
      * Uses MutationObserver to track updates to data-* attributes.
      */
-    connect(): void {
-        this._observer.observe(this._element, {
+    public connect(): void {
+        this.observer.observe(this.element, {
             attributes: true,
             attributeOldValue: true,
         });
@@ -58,16 +58,16 @@ export class DatasetObserver {
      * @param {Record<string, string>} dataset - A shallow copy of the element's current dataset.
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onChanged(dataset: Record<string, string>): void {
+    public onChanged(dataset: Record<string, string>): void {
         // override
     }
 
     /**
      * Stops observing the element and clears any pending debounce timers.
      */
-    disconnect(): void {
-        if (this._debounceTimer) clearTimeout(this._debounceTimer);
-        this._debounceTimer = null;
-        this._observer.disconnect();
+    public disconnect(): void {
+        if (this.debounceTimer) clearTimeout(this.debounceTimer);
+        this.debounceTimer = null;
+        this.observer.disconnect();
     }
 }

package/src/ts/services/ea-observer.ts

@@ -2,26 +2,26 @@
  * @class
  */
 export class ElementAdditionObserver<T extends Element = Element> {
-    private _isActive = false;
+    private isActive = false;
 
-    private _observer: MutationObserver | null = null;
+    private observer: MutationObserver | null = null;
 
-    private _actions: Array<(el: T) => void> = [];
+    private actions: Array<(el: T) => void> = [];
 
     /**
      * Registers a callback to be invoked whenever a matching element is detected being added to the DOM.
      *
      * @param {(el: T) => void} action - Function executed with the newly added element.
      */
-    onDetect(action: (el: T) => void): void {
-        this._actions.push(action);
+    public onDetect(action: (el: T) => void): void {
+        this.actions.push(action);
     }
 
     /**
      * Clears all previously registered detection callbacks.
      */
-    clearDetect(): void {
-        this._actions = [];
+    public clearDetect(): void {
+        this.actions = [];
     }
 
     /**
@@ -30,15 +30,15 @@ export class ElementAdditionObserver<T extends Element = Element> {
      *
      * @param {string} tag - The tag name to watch for (e.g., "select", "div").
      */
-    start(tag: string): void {
-        if (this._isActive) return;
+    public start(tag: string): void {
+        if (this.isActive) return;
 
-        this._isActive = true;
+        this.isActive = true;
 
         const upperTag = tag.toUpperCase();
         const lowerTag = tag.toLowerCase();
 
-        this._observer = new MutationObserver((mutations: MutationRecord[]) => {
+        this.observer = new MutationObserver((mutations: MutationRecord[]) => {
             for (const mutation of mutations) {
                 mutation.addedNodes.forEach((node) => {
                     if (node.nodeType !== 1) return;
@@ -46,16 +46,16 @@ export class ElementAdditionObserver<T extends Element = Element> {
                     const subnode = node as HTMLElement;
 
                     if (subnode.tagName === upperTag) {
-                        this._handle(subnode as unknown as T);
+                        this.handle(subnode as unknown as T);
                     }
 
                     const matches = subnode.querySelectorAll(lowerTag);
-                    matches.forEach((el) => this._handle(el as unknown as T));
+                    matches.forEach((el) => this.handle(el as unknown as T));
                 });
             }
         });
 
-        this._observer.observe(document.body, {
+        this.observer.observe(document.body, {
             childList: true,
             subtree: true,
         });
@@ -65,12 +65,12 @@ export class ElementAdditionObserver<T extends Element = Element> {
      * Stops observing for element additions and releases internal resources.
      * No-ops if the observer is not active.
      */
-    stop(): void {
-        if (!this._isActive) return;
+    public stop(): void {
+        if (!this.isActive) return;
 
-        this._isActive = false;
-        this._observer?.disconnect();
-        this._observer = null;
+        this.isActive = false;
+        this.observer?.disconnect();
+        this.observer = null;
     }
 
     /**
@@ -78,7 +78,7 @@ export class ElementAdditionObserver<T extends Element = Element> {
      *
      * @param {T} element - The element that was detected as added to the DOM.
      */
-    private _handle(element: T): void {
-        this._actions.forEach((action) => action(element));
+    private handle(element: T): void {
+        this.actions.forEach((action) => action(element));
     }
 }