@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/radio-group/interfaces/selection-controller.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=selection-controller.interface.js.map

package/dist/src/components/radio-group/interfaces/validation-controller.interface.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { RadioBaseController } from './base-controller.interface.js';
+/**
+ * Interface for controllers that handle form validation
+ */
+export interface ValidationController extends RadioBaseController {
+    /**
+     * Validate the current radio group state
+     * @returns True if the radio group passes validation
+     */
+    validate(): boolean;
+    /**
+     * Get the current validation message
+     * @returns The validation message or empty string if valid
+     */
+    get validationMessage(): string;
+    /**
+     * Check if the radio group is currently valid
+     * @returns True if the radio group is valid
+     */
+    get isValid(): boolean;
+    /**
+     * Get form data for form submission
+     * @returns Object with name-value pairs for form submission
+     */
+    getFormData(): {
+        [key: string]: string;
+    };
+    /**
+     * Get FormData object for native form submission
+     * @returns FormData object or null if no data to submit
+     */
+    getFormDataObject(): FormData | null;
+    /**
+     * Reset validation state and clear any validation messages
+     */
+    reset(): void;
+    /**
+     * Report validation state (HTML5 form validation API)
+     * @returns True if valid, dispatches invalid event if not
+     */
+    reportValidity(): boolean;
+}
+//# sourceMappingURL=validation-controller.interface.d.ts.map

package/dist/src/components/radio-group/interfaces/validation-controller.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=validation-controller.interface.js.map

package/dist/src/components/radio-group/test/radio_test.d.ts

@@ -0,0 +1,2 @@
+import '../radio-group.component';
+//# sourceMappingURL=radio_test.d.ts.map

package/dist/src/components/radio-group/test/radio_test.js

@@ -0,0 +1,79 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { fixture, expect, html } from '@open-wc/testing';
+import '../radio-group.component';
+suite('NrRadioGroupElement', () => {
+    test('should render options correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+        ];
+        const value = options[0].value;
+        const el = yield fixture(html `<nr-radio-group .options=${options} .value=${value}></nr-radio-group>`);
+        const radioOptions = el.shadowRoot.querySelectorAll('.radio');
+        expect(radioOptions.length).to.equal(options.length);
+        const selectedRadio = el.shadowRoot.querySelector('input[type="radio"]:checked');
+        expect(selectedRadio.value).to.equal(value);
+    }));
+    test('should handle option change', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+        ];
+        const value = options[0].value;
+        const el = yield fixture(html `<nr-radio-group .options=${options} .value=${value}></nr-radio-group>`);
+        expect(el.selectedOption).to.equal(value);
+        const radioInputs = el.shadowRoot.querySelectorAll('input[type="radio"]');
+        radioInputs[1].click();
+        expect(el.selectedOption).to.equal('2');
+    }));
+    test('should disable all options if one default option is disabled', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [
+            { label: 'Option 1', value: '1', disabled: true },
+            { label: 'Option 2', value: '2' },
+        ];
+        const value = options[0].value;
+        const el = yield fixture(html `<nr-radio-group .options=${options} .value=${value}></nr-radio-group>`);
+        const radioInputs = el.shadowRoot.querySelectorAll('input[type="radio"]');
+        radioInputs.forEach((input) => {
+            expect(input.disabled).to.be.true;
+        });
+    }));
+    test('should dispatch a change event when option is changed', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+        ];
+        const el = yield fixture(html `<nr-radio-group .options=${options}></nr-radio-group>`);
+        const radioInput = el.shadowRoot.querySelector('input[type="radio"]');
+        let changeEventTriggered = false;
+        el.addEventListener('change', () => {
+            changeEventTriggered = true;
+        });
+        radioInput.click();
+        expect(changeEventTriggered).to.be.true;
+    }));
+    test('should not dispatch a change event when the same option is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+        ];
+        const defaultOption = options[0].value;
+        const el = yield fixture(html `<nr-radio-group .options=${options} .value=${defaultOption}></nr-radio-group>`);
+        const radioInput = el.shadowRoot.querySelectorAll('input[type="radio"]')[0];
+        let changeEventTriggered = false;
+        el.addEventListener('change', () => {
+            changeEventTriggered = true;
+        });
+        radioInput.click();
+        expect(changeEventTriggered).to.be.false;
+    }));
+});
+//# sourceMappingURL=radio_test.js.map

package/dist/src/components/select/controllers/base.controller.d.ts

@@ -0,0 +1,10 @@
+import { ReactiveControllerHost } from 'lit';
+import { SelectBaseController, SelectHost, ErrorHandler } from '../interfaces/index.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all select component controllers
+ */
+export declare abstract class BaseSelectController extends BaseComponentController<SelectHost & ReactiveControllerHost> implements SelectBaseController, ErrorHandler {
+}
+//# sourceMappingURL=base.controller.d.ts.map

package/dist/src/components/select/controllers/base.controller.js

@@ -0,0 +1,8 @@
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all select component controllers
+ */
+export class BaseSelectController extends BaseComponentController {
+}
+//# sourceMappingURL=base.controller.js.map

package/dist/src/components/select/controllers/dropdown.controller.d.ts

@@ -0,0 +1,76 @@
+import { DropdownController, DropdownPosition, DropdownSpace } from '../interfaces/index.js';
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Dropdown controller manages dropdown positioning, visibility, and interactions
+ */
+export declare class SelectDropdownController extends BaseSelectController implements DropdownController {
+    private _isOpen;
+    private _position;
+    private _dropdownElement;
+    private _triggerElement;
+    /**
+     * Check if dropdown is open
+     */
+    get isOpen(): boolean;
+    /**
+     * Get current dropdown position
+     */
+    get position(): DropdownPosition;
+    /**
+     * Open the dropdown
+     */
+    open(): void;
+    /**
+     * Close the dropdown
+     */
+    close(): void;
+    /**
+     * Toggle dropdown visibility
+     */
+    toggle(): void;
+    /**
+     * Focus the search input if searchable is enabled
+     */
+    private focusSearchInput;
+    /**
+     * Calculate optimal dropdown placement using fixed positioning
+     */
+    calculatePosition(): void;
+    /**
+     * Reset dropdown position
+     */
+    resetPosition(): void;
+    /**
+     * Set dropdown and trigger element references
+     */
+    setElements(dropdownElement: HTMLElement, triggerElement: HTMLElement): void;
+    /**
+     * Find dropdown and trigger elements
+     */
+    private findElements;
+    /**
+     * Apply calculated position to dropdown element using fixed positioning
+     */
+    private applyPosition;
+    /**
+     * Calculate available space around trigger
+     */
+    getAvailableSpace(): DropdownSpace;
+    /**
+     * Handle window resize to recalculate position
+     */
+    private handleResize;
+    /**
+     * Handle scroll to manage dropdown visibility and position
+     */
+    private handleScroll;
+    /**
+     * Host connected lifecycle
+     */
+    hostConnected(): void;
+    /**
+     * Host disconnected lifecycle
+     */
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=dropdown.controller.d.ts.map

package/dist/src/components/select/controllers/dropdown.controller.js

@@ -0,0 +1,281 @@
+import { BaseSelectController } from './base.controller.js';
+import { calculateFixedPosition, applyFixedPosition, applyHeightConstraints, resetDropdownPosition, isTriggerInViewport } from '../../../shared/utils/dropdown-positioning.js';
+/**
+ * Dropdown controller manages dropdown positioning, visibility, and interactions
+ */
+export class SelectDropdownController extends BaseSelectController {
+    constructor() {
+        super(...arguments);
+        this._isOpen = false;
+        this._position = { top: 0, left: 0, width: 0, placement: 'bottom' };
+        this._dropdownElement = null;
+        this._triggerElement = null;
+        /**
+         * Handle window resize to recalculate position
+         */
+        this.handleResize = () => {
+            if (this._isOpen) {
+                this.calculatePosition();
+            }
+        };
+        /**
+         * Handle scroll to manage dropdown visibility and position
+         */
+        this.handleScroll = () => {
+            if (this._isOpen && this._triggerElement) {
+                // Close dropdown if trigger is scrolled out of view
+                if (!isTriggerInViewport(this._triggerElement)) {
+                    this.close();
+                }
+                else {
+                    // With fixed positioning, we need to recalculate position on scroll
+                    // to keep the dropdown aligned with the trigger
+                    this.calculatePosition();
+                }
+            }
+        };
+    }
+    /**
+     * Check if dropdown is open
+     */
+    get isOpen() {
+        return this._isOpen;
+    }
+    /**
+     * Get current dropdown position
+     */
+    get position() {
+        return Object.assign({}, this._position);
+    }
+    /**
+     * Open the dropdown
+     */
+    open() {
+        try {
+            if (!this._isOpen) {
+                this._isOpen = true;
+                this.host.show = true;
+                this.requestUpdate();
+                // Always refresh elements before calculating position
+                this.findElements();
+                // Calculate position after DOM update
+                setTimeout(() => {
+                    this.calculatePosition();
+                }, 10);
+                // Notify host to setup event listeners
+                if (this.host && typeof this.host.setupEventListeners === 'function') {
+                    setTimeout(() => {
+                        this.host.setupEventListeners();
+                    }, 50);
+                }
+                // Focus search input if searchable
+                this.focusSearchInput();
+                this.dispatchEvent(new CustomEvent('nr-dropdown-open', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'open');
+        }
+    }
+    /**
+     * Close the dropdown
+     */
+    close() {
+        try {
+            if (this._isOpen) {
+                this._isOpen = false;
+                this.host.show = false;
+                this.resetPosition();
+                this.requestUpdate();
+                // Notify host to remove event listeners
+                if (this.host && typeof this.host.removeEventListeners === 'function') {
+                    this.host.removeEventListeners();
+                }
+                this.dispatchEvent(new CustomEvent('nr-dropdown-close', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'close');
+        }
+    }
+    /**
+     * Toggle dropdown visibility
+     */
+    toggle() {
+        if (this._isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     * Focus the search input if searchable is enabled
+     */
+    focusSearchInput() {
+        try {
+            // Check if the host has searchable enabled
+            const host = this.host;
+            if (host && host.searchable) {
+                // Wait for the DOM to update and the input to be rendered
+                setTimeout(() => {
+                    var _a;
+                    const searchInput = (_a = host.querySelector) === null || _a === void 0 ? void 0 : _a.call(host, '.search-input');
+                    if (searchInput && typeof searchInput.focus === 'function') {
+                        searchInput.focus();
+                    }
+                }, 100); // Slightly longer delay to ensure the input is fully rendered
+            }
+        }
+        catch (error) {
+            // Silently handle any focus errors to avoid breaking the dropdown
+            console.warn('Failed to focus search input:', error);
+        }
+    }
+    /**
+     * Calculate optimal dropdown placement using fixed positioning
+     */
+    calculatePosition() {
+        try {
+            if (!this._dropdownElement || !this._triggerElement) {
+                this.findElements();
+            }
+            if (!this._dropdownElement || !this._triggerElement) {
+                return;
+            }
+            // Use shared positioning utility
+            const position = calculateFixedPosition(this._triggerElement, this._dropdownElement, { offset: 4, viewportMargin: 8 });
+            // Store the calculated position
+            this._position = position;
+            this.applyPosition();
+        }
+        catch (error) {
+            this.handleError(error, 'calculatePosition');
+        }
+    }
+    /**
+     * Reset dropdown position
+     */
+    resetPosition() {
+        try {
+            if (this._dropdownElement) {
+                resetDropdownPosition(this._dropdownElement);
+                // Only remove max-height if host doesn't have a custom maxHeight
+                const customMaxHeight = this.host.maxHeight;
+                if (!customMaxHeight) {
+                    this._dropdownElement.style.removeProperty('max-height');
+                }
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'resetPosition');
+        }
+    }
+    /**
+     * Set dropdown and trigger element references
+     */
+    setElements(dropdownElement, triggerElement) {
+        this._dropdownElement = dropdownElement;
+        this._triggerElement = triggerElement;
+    }
+    /**
+     * Find dropdown and trigger elements
+     */
+    findElements() {
+        try {
+            const hostElement = this._host;
+            // First priority: use the elements that were explicitly set via setElements()
+            // This ensures each instance gets its own elements
+            if (hostElement.optionsElement && hostElement.wrapper) {
+                this._dropdownElement = hostElement.optionsElement;
+                this._triggerElement = hostElement.wrapper;
+                return;
+            }
+            // Fallback: try to find from Light DOM
+            if (hostElement.querySelector) {
+                this._dropdownElement = hostElement.querySelector('.options');
+                this._triggerElement = hostElement.querySelector('.wrapper');
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'findElements');
+        }
+    }
+    /**
+     * Apply calculated position to dropdown element using fixed positioning
+     */
+    applyPosition() {
+        var _a;
+        try {
+            if (!this._dropdownElement || !this._triggerElement) {
+                return;
+            }
+            // Check if host has a custom maxHeight set
+            const hostMaxHeight = this.host.maxHeight;
+            // Check if CSS max-height is set to auto via CSS custom property
+            const computedStyle = getComputedStyle(this._dropdownElement);
+            const cssMaxHeight = (_a = computedStyle.getPropertyValue('--nuraly-select-local-dropdown-max-height')) === null || _a === void 0 ? void 0 : _a.trim();
+            const isAutoHeight = cssMaxHeight === 'auto' || (!hostMaxHeight && cssMaxHeight === 'auto');
+            // Apply fixed positioning using shared utility
+            applyFixedPosition(this._dropdownElement, this._position, '9999');
+            // Handle max-height based on configuration
+            if (!hostMaxHeight && !isAutoHeight) {
+                this._dropdownElement.style.maxHeight = 'none';
+            }
+            // Apply height constraints using shared utility
+            if (hostMaxHeight) {
+                applyHeightConstraints(this._dropdownElement, this._triggerElement, this._position.placement, { viewportMargin: 10, maxHeight: hostMaxHeight });
+            }
+            else if (isAutoHeight) {
+                // If max-height is set to auto, don't constrain the dropdown
+                this._dropdownElement.style.removeProperty('max-height');
+                this._dropdownElement.style.overflowY = 'visible';
+            }
+            else {
+                applyHeightConstraints(this._dropdownElement, this._triggerElement, this._position.placement, { viewportMargin: 10 });
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'applyPosition');
+        }
+    }
+    /**
+     * Calculate available space around trigger
+     */
+    getAvailableSpace() {
+        var _a, _b;
+        if (!this._triggerElement) {
+            return { above: 0, below: 0, left: 0, right: 0 };
+        }
+        const triggerRect = this._triggerElement.getBoundingClientRect();
+        const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
+        const viewportWidth = ((_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.width) || window.innerWidth;
+        return {
+            above: triggerRect.top,
+            below: viewportHeight - triggerRect.bottom,
+            left: triggerRect.left,
+            right: viewportWidth - triggerRect.right,
+        };
+    }
+    /**
+     * Host connected lifecycle
+     */
+    hostConnected() {
+        window.addEventListener('resize', this.handleResize);
+        window.addEventListener('scroll', this.handleScroll, true);
+    }
+    /**
+     * Host disconnected lifecycle
+     */
+    hostDisconnected() {
+        window.removeEventListener('resize', this.handleResize);
+        window.removeEventListener('scroll', this.handleScroll, true);
+    }
+}
+//# sourceMappingURL=dropdown.controller.js.map

package/dist/src/components/select/controllers/event.controller.d.ts

@@ -0,0 +1,54 @@
+import { SelectOption } from '../select.types.js';
+import { EventController } from '../interfaces/index.js';
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Event controller manages all event handling for the select component
+ */
+export declare class SelectEventController extends BaseSelectController implements EventController {
+    /**
+     * Handles clicks on the select trigger element
+     */
+    handleTriggerClick: (event: Event) => void;
+    /**
+     * Handles clicks on individual options
+     */
+    handleOptionClick: (event: Event, option: SelectOption) => void;
+    /**
+     * Handles removal of selected tags in multiple selection mode
+     */
+    handleTagRemove: (event: Event, option: SelectOption) => void;
+    /**
+     * Handles the clear all selections button
+     */
+    handleClearAll: (event: Event) => void;
+    /**
+     * Handles keyboard navigation and interactions
+     */
+    handleKeyDown: (event: KeyboardEvent) => void;
+    /**
+     * Handles focus events
+     */
+    handleFocus: () => void;
+    /**
+     * Handles blur events
+     */
+    handleBlur: () => void;
+    /**
+     * Handles clicks outside the component to close dropdown
+     * Uses composedPath() to properly detect clicks on slotted content
+     */
+    handleWindowClick: (event: Event) => void;
+    /**
+     * Sets up global event listeners (called when dropdown opens)
+     */
+    setupEventListeners(): void;
+    /**
+     * Removes global event listeners (called on disconnect or dropdown close)
+     */
+    removeEventListeners(): void;
+    /**
+     * Cleanup when host disconnects
+     */
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=event.controller.d.ts.map