juxscript 1.1.240 → 1.1.244

package/lib/components/script.d.ts

@@ -1,14 +0,0 @@
-/**
- * Script - Inject inline JavaScript into the document
- * For external scripts, use Import component instead
- * Auto-renders when created or modified
- */
-export declare class Script {
-    private _id;
-    private code;
-    constructor(code: string, id?: string);
-    render(): this;
-    remove(): void;
-}
-export declare function script(code: string, id?: string): Script;
-//# sourceMappingURL=script.d.ts.map

package/lib/components/script.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"script.d.ts","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,IAAI,CAAS;gBAET,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM;IAMrC,MAAM,IAAI,IAAI;IAcd,MAAM,IAAI,IAAI;CAMf;AAGD,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAExD"}

package/lib/components/script.js

@@ -1,33 +0,0 @@
-/**
- * Script - Inject inline JavaScript into the document
- * For external scripts, use Import component instead
- * Auto-renders when created or modified
- */
-export class Script {
-    constructor(code, id) {
-        // ID only for deduplication, auto-generate if not provided
-        this._id = id || `jux-script-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        this.code = code;
-    }
-    render() {
-        // Check if script with this ID already exists
-        if (document.getElementById(this._id)) {
-            return this;
-        }
-        const script = document.createElement('script');
-        script.id = this._id;
-        script.textContent = this.code;
-        document.head.appendChild(script);
-        return this;
-    }
-    remove() {
-        const existing = document.getElementById(this._id);
-        if (existing) {
-            existing.remove();
-        }
-    }
-}
-// ✅ ID is optional
-export function script(code, id) {
-    return new Script(code, id);
-}

package/lib/components/script.ts

@@ -1,41 +0,0 @@
-/**
- * Script - Inject inline JavaScript into the document
- * For external scripts, use Import component instead
- * Auto-renders when created or modified
- */
-export class Script {
-  private _id: string;
-  private code: string;
-
-  constructor(code: string, id?: string) {
-    // ID only for deduplication, auto-generate if not provided
-    this._id = id || `jux-script-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    this.code = code;
-  }
-
-  render(): this {
-    // Check if script with this ID already exists
-    if (document.getElementById(this._id)) {
-      return this;
-    }
-
-    const script = document.createElement('script');
-    script.id = this._id;
-    script.textContent = this.code;
-    document.head.appendChild(script);
-
-    return this;
-  }
-
-  remove(): void {
-    const existing = document.getElementById(this._id);
-    if (existing) {
-      existing.remove();
-    }
-  }
-}
-
-// ✅ ID is optional
-export function script(code: string, id?: string): Script {
-  return new Script(code, id);
-}

package/lib/components/select.d.ts

@@ -1,42 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface SelectOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-}
-export interface SelectOptions {
-    options?: SelectOption[];
-    value?: string;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    style?: string;
-    class?: string;
-    onValidate?: (value: string) => boolean | string;
-}
-interface SelectState extends BaseState {
-    options: SelectOption[];
-    value: string;
-    placeholder: string;
-}
-export declare class Select extends BaseComponent<SelectState> {
-    constructor(id: string, options?: SelectOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    options(value: SelectOption[]): this;
-    value(value: string): this;
-    placeholder(value: string): this;
-    addOption(option: SelectOption): this;
-    getValue(): string;
-    setValue(value: string): this;
-    validate(): boolean;
-    isValid(): boolean;
-    protected _validateValue(value: string): boolean | string;
-    protected _buildInputElement(): HTMLElement;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function select(id: string, options?: SelectOptions): Select;
-export {};
-//# sourceMappingURL=select.d.ts.map

package/lib/components/select.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOnE,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC1B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC;CACpD;AAED,UAAU,WAAY,SAAQ,SAAS;IACnC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;gBACtC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAsBnD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI;IAKpC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI;IASrC,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAU7B,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAsBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAqC3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAuFrE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAEtE"}

package/lib/components/select.js

@@ -1,209 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['change'];
-export class Select extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            options: options.options ?? [],
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select an option'
-        });
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    // BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-    options(value) {
-        this.state.options = value;
-        return this;
-    }
-    value(value) {
-        return this.setValue(value);
-    }
-    placeholder(value) {
-        this.state.placeholder = value;
-        return this;
-    }
-    addOption(option) {
-        this.state.options = [...this.state.options, option];
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-    getValue() {
-        return this.state.value;
-    }
-    setValue(value) {
-        this.state.value = value;
-        if (this._inputElement) {
-            this._inputElement.value = value;
-        }
-        return this;
-    }
-    validate() {
-        this._hasBeenValidated = true;
-        const value = this.getValue();
-        const result = this._validateValue(value);
-        if (result === true) {
-            this._clearError();
-            return true;
-        }
-        else {
-            this._showError(result);
-            return false;
-        }
-    }
-    isValid() {
-        const value = this.getValue();
-        return this._validateValue(value) === true;
-    }
-    _validateValue(value) {
-        const { required, options } = this.state;
-        if (required && !value) {
-            return 'Please select an option';
-        }
-        // Validate that value is one of the options
-        if (value && !options.some(opt => opt.value === value)) {
-            return 'Invalid option selected';
-        }
-        if (this._onValidate) {
-            const result = this._onValidate(value);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-        return true;
-    }
-    _buildInputElement() {
-        const { options, value, placeholder, required, disabled, name } = this.state;
-        const select = document.createElement('select');
-        select.className = 'jux-input-element jux-select-element';
-        select.id = `${this._id}-input`;
-        select.name = name;
-        select.required = required;
-        select.disabled = disabled;
-        // Placeholder option
-        if (placeholder) {
-            const placeholderOption = document.createElement('option');
-            placeholderOption.value = '';
-            placeholderOption.textContent = placeholder;
-            placeholderOption.disabled = true;
-            placeholderOption.selected = !value;
-            select.appendChild(placeholderOption);
-        }
-        // Options
-        options.forEach(option => {
-            const optionEl = document.createElement('option');
-            optionEl.value = option.value;
-            optionEl.textContent = option.label;
-            optionEl.disabled = option.disabled || false;
-            optionEl.selected = option.value === value;
-            select.appendChild(optionEl);
-        });
-        return select;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { style, class: className } = this.state;
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-input jux-select';
-        wrapper.id = this._id;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        // Label
-        if (this.state.label) {
-            wrapper.appendChild(this._renderLabel());
-        }
-        // Select container
-        const selectContainer = document.createElement('div');
-        selectContainer.className = 'jux-input-container jux-select-container';
-        // Select element
-        const selectEl = this._buildInputElement();
-        this._inputElement = selectEl;
-        selectContainer.appendChild(selectEl);
-        wrapper.appendChild(selectContainer);
-        // Error element
-        wrapper.appendChild(this._renderError());
-        // Wire change callback with (value, event, component)
-        selectEl.addEventListener('change', (e) => {
-            this.state.value = selectEl.value;
-            this._triggerCallback('change', selectEl.value, e, this);
-        });
-        // Wire events
-        this._wireStandardEvents(wrapper);
-        this._wireFormSync(selectEl, 'change');
-        // Sync label changes
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v) => String(v));
-            labelSync.stateObj.subscribe((val) => {
-                this.label(transform(val));
-            });
-        }
-        // Sync options changes
-        const optionsSync = this._syncBindings.find(b => b.property === 'options');
-        if (optionsSync) {
-            const transform = optionsSync.toComponent || ((v) => v);
-            optionsSync.stateObj.subscribe((val) => {
-                const transformed = transform(val);
-                this.state.options = transformed;
-                // Rebuild select options
-                selectEl.innerHTML = '';
-                if (this.state.placeholder) {
-                    const placeholderOption = document.createElement('option');
-                    placeholderOption.value = '';
-                    placeholderOption.textContent = this.state.placeholder;
-                    placeholderOption.disabled = true;
-                    placeholderOption.selected = !this.state.value;
-                    selectEl.appendChild(placeholderOption);
-                }
-                transformed.forEach((option) => {
-                    const optionEl = document.createElement('option');
-                    optionEl.value = option.value;
-                    optionEl.textContent = option.label;
-                    optionEl.disabled = option.disabled || false;
-                    optionEl.selected = option.value === this.state.value;
-                    selectEl.appendChild(optionEl);
-                });
-            });
-        }
-        container.appendChild(wrapper);
-        return this;
-    }
-}
-export function select(id, options = {}) {
-    return new Select(id, options);
-}

package/lib/components/select.ts

@@ -1,281 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['change'] as const;
-
-export interface SelectOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-}
-
-export interface SelectOptions {
-    options?: SelectOption[];
-    value?: string;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    style?: string;
-    class?: string;
-    onValidate?: (value: string) => boolean | string;
-}
-
-interface SelectState extends BaseState {
-    options: SelectOption[];
-    value: string;
-    placeholder: string;
-}
-
-export class Select extends BaseComponent<SelectState> {
-    constructor(id: string, options: SelectOptions = {}) {
-        super(id, {
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            options: options.options ?? [],
-            value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select an option'
-        });
-
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-
-    options(value: SelectOption[]): this {
-        this.state.options = value;
-        return this;
-    }
-
-    value(value: string): this {
-        return this.setValue(value);
-    }
-
-    placeholder(value: string): this {
-        this.state.placeholder = value;
-        return this;
-    }
-
-    addOption(option: SelectOption): this {
-        this.state.options = [...this.state.options, option];
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-
-    getValue(): string {
-        return this.state.value;
-    }
-
-    setValue(value: string): this {
-        this.state.value = value;
-
-        if (this._inputElement) {
-            (this._inputElement as HTMLSelectElement).value = value;
-        }
-
-        return this;
-    }
-
-    validate(): boolean {
-        this._hasBeenValidated = true;
-        const value = this.getValue();
-        const result = this._validateValue(value);
-
-        if (result === true) {
-            this._clearError();
-            return true;
-        } else {
-            this._showError(result as string);
-            return false;
-        }
-    }
-
-    isValid(): boolean {
-        const value = this.getValue();
-        return this._validateValue(value) === true;
-    }
-
-    protected _validateValue(value: string): boolean | string {
-        const { required, options } = this.state;
-
-        if (required && !value) {
-            return 'Please select an option';
-        }
-
-        // Validate that value is one of the options
-        if (value && !options.some(opt => opt.value === value)) {
-            return 'Invalid option selected';
-        }
-
-        if (this._onValidate) {
-            const result = this._onValidate(value);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-
-        return true;
-    }
-
-    protected _buildInputElement(): HTMLElement {
-        const { options, value, placeholder, required, disabled, name } = this.state;
-
-        const select = document.createElement('select');
-        select.className = 'jux-input-element jux-select-element';
-        select.id = `${this._id}-input`;
-        select.name = name!;
-        select.required = required!;
-        select.disabled = disabled!;
-
-        // Placeholder option
-        if (placeholder) {
-            const placeholderOption = document.createElement('option');
-            placeholderOption.value = '';
-            placeholderOption.textContent = placeholder;
-            placeholderOption.disabled = true;
-            placeholderOption.selected = !value;
-            select.appendChild(placeholderOption);
-        }
-
-        // Options
-        options.forEach(option => {
-            const optionEl = document.createElement('option');
-            optionEl.value = option.value;
-            optionEl.textContent = option.label;
-            optionEl.disabled = option.disabled || false;
-            optionEl.selected = option.value === value;
-            select.appendChild(optionEl);
-        });
-
-        return select;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { style, class: className } = this.state;
-
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-input jux-select';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        // Label
-        if (this.state.label) {
-            wrapper.appendChild(this._renderLabel());
-        }
-
-        // Select container
-        const selectContainer = document.createElement('div');
-        selectContainer.className = 'jux-input-container jux-select-container';
-
-        // Select element
-        const selectEl = this._buildInputElement() as HTMLSelectElement;
-        this._inputElement = selectEl;
-        selectContainer.appendChild(selectEl);
-        wrapper.appendChild(selectContainer);
-
-        // Error element
-        wrapper.appendChild(this._renderError());
-
-        // Wire change callback with (value, event, component)
-        selectEl.addEventListener('change', (e) => {
-            this.state.value = selectEl.value;
-            this._triggerCallback('change', selectEl.value, e, this);
-        });
-
-        // Wire events
-        this._wireStandardEvents(wrapper);
-        this._wireFormSync(selectEl, 'change');
-
-        // Sync label changes
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v: any) => String(v));
-            labelSync.stateObj.subscribe((val: any) => {
-                this.label(transform(val));
-            });
-        }
-
-        // Sync options changes
-        const optionsSync = this._syncBindings.find(b => b.property === 'options');
-        if (optionsSync) {
-            const transform = optionsSync.toComponent || ((v: any) => v);
-            optionsSync.stateObj.subscribe((val: any) => {
-                const transformed = transform(val);
-                this.state.options = transformed;
-
-                // Rebuild select options
-                selectEl.innerHTML = '';
-
-                if (this.state.placeholder) {
-                    const placeholderOption = document.createElement('option');
-                    placeholderOption.value = '';
-                    placeholderOption.textContent = this.state.placeholder;
-                    placeholderOption.disabled = true;
-                    placeholderOption.selected = !this.state.value;
-                    selectEl.appendChild(placeholderOption);
-                }
-
-                transformed.forEach((option: SelectOption) => {
-                    const optionEl = document.createElement('option');
-                    optionEl.value = option.value;
-                    optionEl.textContent = option.label;
-                    optionEl.disabled = option.disabled || false;
-                    optionEl.selected = option.value === this.state.value;
-                    selectEl.appendChild(optionEl);
-                });
-            });
-        }
-
-        container.appendChild(wrapper);
-
-
-        return this;
-    }
-
-
-}
-
-export function select(id: string, options: SelectOptions = {}): Select {
-    return new Select(id, options);
-}

package/lib/components/sidebar.d.ts

@@ -1,59 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface SidebarItem {
-    label: string;
-    href?: string;
-    click?: () => void;
-    icon?: string;
-    items?: SidebarItem[];
-    active?: boolean;
-    itemClass?: string;
-}
-export interface SidebarOptions {
-    position?: 'left' | 'right';
-    width?: string;
-    collapsible?: boolean;
-    showToggle?: boolean;
-    expandOnHover?: boolean;
-    collapsed?: boolean;
-    items?: SidebarItem[];
-    header?: string;
-    footer?: string;
-    style?: string;
-    class?: string;
-}
-type SidebarState = BaseState & {
-    position: 'left' | 'right';
-    width: string;
-    collapsible: boolean;
-    showToggle: boolean;
-    expandOnHover: boolean;
-    collapsed: boolean;
-    items: SidebarItem[];
-    header: string;
-    footer: string;
-};
-export declare class Sidebar extends BaseComponent<SidebarState> {
-    private _sidebar;
-    constructor(id: string, options?: SidebarOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    private _setActiveStates;
-    private _renderItem;
-    update(prop: string, value: any): void;
-    width(value: string): this;
-    position(value: 'left' | 'right'): this;
-    collapsible(value: boolean): this;
-    showToggle(value: boolean): this;
-    expandOnHover(value: boolean): this;
-    collapsed(value: boolean): this;
-    items(value: SidebarItem[]): this;
-    addItem(item: SidebarItem): this;
-    header(value: string): this;
-    footer(value: string): this;
-    toggle(): void;
-    refreshActiveStates(): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function sidebar(id: string, options?: SidebarOptions): Sidebar;
-export {};
-//# sourceMappingURL=sidebar.d.ts.map